Documentation
Guides
Customization

## Splash Screen

The splash screen is the screen that shows up when your app is loading. It's NOT just a cosmetic screen or something that you can make faster, it simply shows up while Angular loads and hides immediately after it finishes loading.

## How it works?

When you first arrive your app via its website address, the index.html loads first. It has all the required scripts injected in it by the AngularCLI, so as soon as it loads, it also starts loading the required script files.

After those required script files loaded, Angular starts the Bootstrapping progress and loads the first component (usually the AppComponent). Then AppComponent takes over and loads other modules and components and your app starts running.

While all of these happening, you will see nothing on the screen simply because the index.html file has nothing in it except the script injections and the entry point for your AppComponent. That's where the splash screen comes into play and hides the white screen of loading.

## Customizing the screen

Splash screen content stays in the `index.html` file. The `fuse-splash-screen` dummy element holds everything related to the splash screen. This element is not an actual Angular component, it's just a simple wrapper to hold everything you may want to show on the splash screen.

Splash screen styles are located in `public/styles/splash-screen.css` file.

You can change the styles to modify the look of the splash screen and put anything you want into the `fuse-splash-screen` element to show on the page.

Please note, you cannot run Angular components in here. Basically, by the time you can run Angular components, you won't be needing the splash screen because everything would already be loaded!

If you don't want to show the splash screen and you are happy with the white screen of loading, then you can simply remove the `fuse-splash-screen` dummy element and its content from the index.html file as well as the `link` element that loads the `splash-screen.css` file:

... <!-- Splash screen styles --> <link href="styles/splash-screen.css" rel="stylesheet"> ... <!-- Splash screen --> <fuse-splash-screen> <img src="images/logo/logo.svg" alt="Fuse logo"> <div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> </fuse-splash-screen> ...