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.
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
.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.