Adjust Loading Animations in Vaadin

By default, loading animations in Vaadin are already pretty awesome, though you might want to adjust them to make them fit better with your custom theme.

While tweaking around with the animations myself, I found that there wasn’t too much information to find about it around the web, so here’s me contributing.

It’s All CSS

To adjust the loading animations, there’s actually no need at all to fiddle in Java code. Everything can be easily set up in css. You only need to edit one file, which would be your custom theme’s scss file.

First of all, it is important to know that the styling for the animations is not located under the .v-app class. All the editing can be done top-level, right after the base theme include statement. For the Valo theme, this would be right after the following line: @include valo;.

Top Loading Indicator

In this example I will cover a minor tweak to the loading bar you see on the top of the page, which by default is blue. It is displayed upon page navigation.

To simply adjust the color you can use following code snippet, where all style attributes are just coppied from the default styling. The only property you’ll want to tweak will be the background-color one.

.v-loading-indicator {
    position: fixed !important;
    z-index: 99999;
    left: 0;
    right: auto;
    top: 0;
    width: 50%;
    opacity: 1;
    height: 4px;
    background-color: red;
    pointer-events: none;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
    -webkit-animation: v-progress-start 1000ms 200ms both;
    -moz-animation: v-progress-start 1000ms 200ms both;
    animation: v-progress-start 1000ms 200ms both;

Connection Lost Spinner

Since we’re at it, we might as well adjust the color of the spinner that shows when the connection was lost. Once again, this snippet must be placed outside the .v-app class. Obviously, if you want to adjust all spinners application-wide, apply the styling to the .spinner class only.

The resulting box with spinner.
The resulting box with spinner.
.v-reconnect-dialog .spinner {
    border-top-color: red;
    border-right-color: red;

Centered Loading Spinner

Vaadin’s default spinner is shown upon page refresh, for instance. At least in the Valo theme, it is relatively small. Its’ styling is somewhat basic, so it might be good to give it a more customized touch, like the spinner below.

A custom loading spinner.
A custom loading spinner.

Right along the previously provided css snippet, another one can be placed. Following example shows how to replace the default spinner with our own.

.v-app-loading::before {
    opacity: .8; 
    filter: alpha(opacity=80); 
    width: 100px; height: 100px; 
    background: transparent url(../customtheme/img/spinner.gif); 

Update the Vaadin Theme

After these small tweaks in this one file you are all set and ready to check out the result of the applied changes.

Keep in mind that you will need to update the theme first. Vaadin has this Maven plugin com.vaadin:vaadin-maven-plugin:8.0.0, that you can add to your pom.xml. Once added, you can simply update and compile the theme and rebuild your project. Besides that, you will probably have to clear your browser’s cache before reloading your application. If you don’t do that, a previous version of your theme’s css file will be used.

Author: Thibault Helsmoortel

Belgian IT enthusiast with a wide range of interests. Enjoys table tennis and meeting friends at the local bar.

7 thoughts on “Adjust Loading Animations in Vaadin”

    1. Hi there. Thanks for letting me know. I have updated the post and it should be good now. Let me know if you’re still having issues. You might have to clear your browser cache in order to view the source in the proper format.

  1. With your example I managed it to change the color of the top loading Indicator. But I like to use a spinner in the center of the page. How can I do that?

    1. Hi Christian, great to hear you got the color changed! Overriding that loading bar to become a spinner in the center of the page doesn’t seem like a great idea to be honest. Mostly the loading bar indicates page load progression. It is a small bar to give the user a non-intrusive experience. That being said, you might have a good case for the center page spinner, but couldn’t you just override the Vaadin default for that (see ‘Centered Loading Spinner’)?

      Ohterwise, I’m sure it can be done, but I wouldn’t expect a quick and easy solution here…

      Hope this helps 😉

      1. Hi Thebault,

        I was able to change color of blue bar , but I want spinner like in center of page in some situations

        Please let me know how can I inject spinner / spinning circle in center of page , like in some situations where blue bar does not appear

        Thanks ,
        Vaibhav Mittal
        [email protected]

        1. Hi Vaibhav,

          There’s a section on the centered spinner in the article as well, but I’m not sure if that’s what you are referring to. Do you want to modify the bar to make it a centered spinner or do you just want to modify the spinner already provided by Vaadin?

          1. Hi Thibault,

            Thanks a lot for reply to my query I really appreciate it ., ?

            Yes I want spinner or any icon like hour glass from font awesome , centered in page instead of blue bar to be entire application

            Please let me know is there any work around , Thanks in advance

            Thanks ,
            Vaibhav Mittal

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.