Splash Screen/Image

How to implement a Splash screen/image before Login?

1 Like

Hello, @apunzi

I’ll prepare small example for you and describe main parts.


1 Like

Nice. Thank you in advance.

So, I’ve researched your question and here is a result.

First of all, you can use the $v-app-loading-text theme variable. Value of this variable will be shown while application widgetset is loading.

Moreover, you can use the .v-app-loading selector to customize layout.


Firstly, thanks for your answer.
I tried to use .-v-app-loading selector, and can’t figure out how to use it to show a image while app is loading. In addition, making some tests on extended login window, GIF spinner is shown all the time, even when login box appears.

Could you be a little bit more accurate?

Hi @apunzi

I recently changed the loading indicator myself to make it look a little better than the standard one.

Attached is a sample project I did to work it out. As @tsarev mentions it is about changing a few styles.

I have extended the halo theme so if you look in there you will see that it currently implements a pulsing dot I got from this site SpinKit | Simple CSS Spinners

There is also commented out styles in the theme extension that replaced the normal animated GIF with a gif I generated on https://loading.io/

If you look at the commented out styles and use those but put in the image you want to use as the splash screen then that might get you what you are after.

LoadingIndicatorPOC.zip (231.0 KB)


I took a look at your source and got the idea. Thank you very much @services