The Loading Indicator

    By default, the loading indicator is shown at the top of the viewport after a delay. You can turn the indicator off, change delays or customize the looks of the indicator. The theming targets the element located inside the <body> element. You also need to toggle the default theming off.

    HTML

    The loading indicator can be configured from Java by accessing the configuration object from UI. The easiest way to do this is with the (see bootstrap page docs for more information) and the changes are applied already on the initial response.

    The configuration object can be used for configuring the delays after which the indicator changes “stages”. The indicator is shown after a delay of 300ms by default and a class name first is set to it. There are two additional delays which you can configure. After the delays, class names second and are set and can be used to change the style of the loading indicator after certain time has passed.

    Java

    To show an alternative for the default loading indicator theme, this examples demonstrates how to show a loading indicator that simply darkens the UI. The darkening is animated, so that it does not flash the screen. The darkening starts after the server side round-trip takes over 0.5 seconds (300ms delay configured in java + 200ms animation delay).

    The next image illustrates an application with the modal curtain visible during loading (above) compared to the normal state (below).

    Displaying a Changing Loading Indicator

    Once the loading indicator is displayed, it gets the class name first. After the second and third configurable delays, it gets the second and the class names respectively. You can use those class names in your styling to let the look reflect how long time the user has been waiting.

    Note
    		In addition to the css, the default theme should be explicitly disabled via Java.

    CSS