Customize the Initial Loading Screen in Angular

By default, Angular gives you the loading… text nested inside the app-root during bootstrap. For a polished production app you’re going to want something a little more fancy. There are different ways to achieve this, but I’m going provide a quick recipe using only CSS.

Custom Loading Screen

The idea is to create fixed div will cover 100% of the screen while the root component is empty. The CSS pseudo selector :empty can be used display some static loading content.

index.html

First, delete the loading… text from the the app-root if it’s still there. Then, add the HTML you want to display before the app loads.

<app-root></app-root>
<div class="loading">
  <h1>~$ bootstrapping firestarter...</h1>
</div>

styles.scss

Then create a style that fills the entire viewport, but only when the app-root is empty.

.loading {
    opacity: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    background: #272c33;
    padding-top: 25vh;
    text-align: center;
    z-index: -1;
    transition: opacity .8s ease-out;
}

app-root:empty + .loading {
  opacity: 1;
  z-index: 100;
  h1 {
    font-family: "courier", monospace;
    color: #EEE;
    margin-bottom: 50px;
  }
}

It should only take a second or two to bootstrap your app, so you you should make the loading splash page clear and concise - design it like an iOS app loading screen.

The loading container will hold the content, with it’s opacity set to 1 only when the app-root is empty. I also added a CSS transition to give it a subtle fade effect when loading is complete. This is a good place to add some CSS loading animation, such as SpinKit.