How to implement initial page loading animation like on vaadin.com

How can I implement an initial loading animation (or even just a picture) like it is when openening any vaadin.com domain?

![Image]
(https://i.ibb.co/b5f1jF9/8f9e23e56a43e92efcc170744e38c9f1.gif)

Here is a small demo app for showing how to do that: https://github.com/vlukashov/vaadin-splash-screen-demo/releases/tag/spinner-v14

With Vaadin 14 (LTS) this is done by adding a bit of extra HTML and CSS into the bootstrap page, using the [PageConfigurator.configurePage()]
(https://vaadin.com/docs/v14/flow/advanced/tutorial-bootstrap.html#pageconfigurator) API:

@Override
public void configurePage(InitialPageSettings initialPageSettings) {
    initialPageSettings.addInlineFromFile("splash-screen.html",
            InitialPageSettings.WrapMode.NONE);
}

splash-screen.html:

<div id="splash-screen">
    <!-- source: https://tobiasahlin.com/spinkit/ -->
    <div class="spinner"></div>
</div>

<style>
    #splash-screen {
        background: #d35400;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 100000;
    }

    #splash-screen.loaded {
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }

    #splash-screen .spinner {
        width: 40px;
        height: 40px;
        background-color: #fff;

        margin: 100px auto;
        -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
        animation: sk-rotateplane 1.2s infinite ease-in-out;
    }

    @-webkit-keyframes sk-rotateplane {
        0% { -webkit-transform: perspective(120px) }
        50% { -webkit-transform: perspective(120px) rotateY(180deg) }
        100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    }

    @keyframes sk-rotateplane {
        0% {
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
        } 50% {
              transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
              -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
          } 100% {
                transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
                -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            }
    }
</style>

With Vaadin 15+ the extra HTML / CSS can be added directly to the index.html page template. The same demo app shows that as well: https://github.com/vlukashov/vaadin-splash-screen-demo/releases/tag/spinner

Which animation you want to put to the page depends on you. There are plenty of examples that you can find by searching for “CSS spinner”. E.g. https://projects.lukehaas.me/css-loaders/ or https://tobiasahlin.com/spinkit/.

Thanks very much!

It seems that the ts file removes the spinner too early for my app. The screen flashes orange for a fraction of a second and then switches back to the blank screen with the standard blue line progress bar at the top for 5 seconds or so until the page is eventually rendered.

On the vaadin.com website the “Vaadin spinner” stays up until the very moment the page is rendered. Does this require a combination of the above solution and a change in the vaadin progress bar?

Thx.

Franz Schöning:
It seems that the ts file removes the spinner too early for my app. The screen flashes orange for a fraction of a second and then switches back to the blank screen with the standard blue line progress bar at the top for 5 seconds or so until the page is eventually rendered.

On the vaadin.com website the “Vaadin spinner” stays up until the very moment the page is rendered. Does this require a combination of the above solution and a change in the vaadin progress bar?

Thx.

To my knowledge vaadin.com runs on V14 at the moment. It uses a somewhat similar solution to what I’ve posted above.

The example I’ve posted for Vaadin 15 hides the splash screen immediately after the application shell is loaded, without checking if the view to load is a client-side view or a server-side view. For server-side views (as in the example I’ve liked to) there is an addition waiting time to render that view. It’s that waiting time that adds the loading indicator which you’ve noticed.

I’ve done a quick check internally, and it seams there is no public API that tells when the server-side view is done loading so that the splash screen can be hidden then. Here is a feature request for that: https://github.com/vaadin/flow/issues/8486

It’s still possible to hack around and use internal APIs, but that’s surely not a solution we could officially recommend. It would look like this:

// WARNING: accessing internal Flow APIs
// This may break on any Flow version upgrade without any prior notice
const original = (window as any).Vaadin.Flow.loading;
(window as any).Vaadin.Flow.loading = (action: boolean) => {
  // When this is called first time (action = true), do nothing.
  // That's when Flow starts loading and the splash screen is still visible.
  // There is no need to show the Flow loading indicator at that time.

  // When this is called second time (action = false), hide the splash screen
  // and restore the default behavior.
  // Next time Flow starts loading something the default loading indicator will
  // be visible.
  if (!action) {
    document.querySelector('#splash-screen')!.classList.add('loaded');
    (window as any).Vaadin.Flow.loading = original;
  }
};

I’ve also updated the demo project at https://github.com/vlukashov/vaadin-splash-screen-demo/releases/tag/spinner

Viktor Lukashov:

Franz Schöning:
It seems that the ts file removes the spinner too early for my app. The screen flashes orange for a fraction of a second and then switches back to the blank screen with the standard blue line progress bar at the top for 5 seconds or so until the page is eventually rendered.

On the vaadin.com website the “Vaadin spinner” stays up until the very moment the page is rendered. Does this require a combination of the above solution and a change in the vaadin progress bar?

Thx.

To my knowledge vaadin.com runs on V14 at the moment. It uses a somewhat similar solution to what I’ve posted above.

The example I’ve posted for Vaadin 15 hides the splash screen immediately after the application shell is loaded, without checking if the view to load is a client-side view or a server-side view. For server-side views (as in the example I’ve liked to) there is an addition waiting time to render that view. It’s that waiting time that adds the loading indicator which you’ve noticed.

I’ve done a quick check internally, and it seams there is no public API that tells when the server-side view is done loading so that the splash screen can be hidden then. Here is a feature request for that: https://github.com/vaadin/flow/issues/8486

It’s still possible to hack around and use internal APIs, but that’s surely not a solution we could officially recommend. It would look like this:

// WARNING: accessing internal Flow APIs
// This may break on any Flow version upgrade without any prior notice
const original = (window as any).Vaadin.Flow.loading;
(window as any).Vaadin.Flow.loading = (action: boolean) => {
  // When this is called first time (action = true), do nothing.
  // That's when Flow starts loading and the splash screen is still visible.
  // There is no need to show the Flow loading indicator at that time.

  // When this is called second time (action = false), hide the splash screen
  // and restore the default behavior.
  // Next time Flow starts loading something the default loading indicator will
  // be visible.
  if (!action) {
    document.querySelector('#splash-screen')!.classList.add('loaded');
    (window as any).Vaadin.Flow.loading = original;
  }
};

I’ve also updated the demo project at https://github.com/vlukashov/vaadin-splash-screen-demo/

Does this solution apply to vaadin version 17?
I am trying to implement a sort of loading page that shows information about the project configurations and i have been researching and came to this post.
I tried to implement your solution as a starting point for what i want but no changes occur

The only thing i added was the contents of index.html and index.ts to my /frontend folder of my project
Am i missing something?

Bruno Bento:
Does this solution apply to vaadin version 17?
I am trying to implement a sort of loading page that shows information about the project configurations and i have been researching and came to this post.
I tried to implement your solution as a starting point for what i want but no changes occur

The only thing i added was the contents of index.html and index.ts to my /frontend folder of my project
Am i missing something?

I’ve just checked that it works the same in Vaadin 17 and 18 (updated the demo project to 18 now).
If your app’s UI is in Java and you want to show a splash screen, it should be enough to copy the contents of index.html and index.ts from the demo project into your frontend folder.

@Viktor Lukashov

thanks for such useful demo.

How do I implement exactly same loading animation as vaadin.com has (animation goes thru icon)?

By searching I found only simple annimations.

Alexander Muravya:
@Viktor Lukashov

thanks for such useful demo.

How do I implement exactly same loading animation as vaadin.com has (animation goes thru icon)?

By searching I found only simple annimations.

I’ve updated the demo at https://github.com/vlukashov/vaadin-splash-screen-demo/ to show exactly how the Vaadin logo animation is implemented on vaadin.com. The difference between that and the previous example with a spinner is only in complexity of the CSS animations.

A simple spinner typically requires a single <div> and some custom CSS for positioning and animations. An animated logo may require a more complex HTML structure and more CSS rules, as is the case with the Vaadin logo example.

I’ve updated the demo at https://github.com/vlukashov/vaadin-splash-screen-demo/ to show exactly how the Vaadin logo animation is implemented on vaadin.com. The difference between that and the previous example with a spinner is only in complexity of the CSS animations.

A simple spinner typically requires a single <div> and some custom CSS for positioning and animations. An animated logo may require a more complex HTML structure and more CSS rules, as is the case with the Vaadin logo example.

Thanks a lot for example. It rocks!