Simple Vue splash screen

Today, ill just introduce a nifty little trick to create a loading screen, to let your users know that your app is still working, even though it takes a while to do the initial load.

Splash screen

The idea is to add the loading/splash screen to the .public/index.html file inside the <div id="app"></div> or whatever your mount point is, because vue will remove whatever is inside, when it is done loading the components.

I’ve just created a new vue app from the CLI.
To simulate the slow rendering I’ve put a delay function in the HelloWorld.vue which is then called inside of the beforeMount()

In the .public/index.html file I’ve added;

which is just some simple animation css and inside the <div id="app"></div>I’ve added the following:

You can find the full project on my github

Special thanks to https://codepen.io/luka-butina/ for the Loading Screen.

Leave a Reply

Your email address will not be published. Required fields are marked *