Search Lessons, Code Snippets, and Videos
search by algolia
X
#native_cta# #native_desc# Sponsored by #native_company#

Customize the Initial Loading Screen in Angular

written by Jeff Delaney
full courses for pro members

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

Customized loading screen for angular 2 app

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.