angular - Pre-bootstrap loading screen

Question

I'm looking for a pre-bootstrap loading screen along the lines of this example but for Angular 2.

question from:https://stackoverflow.com/questions/35243443/pre-bootstrap-loading-screen

Answer 1

I can suggest a simple CSS approach.

First of all add .loading div into main HTML page, it should follow main app component element. For example:

<my-app></my-app>

<div class="loading">
    <h1>Loading...</h1>
</div>

Now you can target and style splash screen with my-app:empty + .loading CSS selector, and make it disappear as soon as the app gets bootstraped. Example:

/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.loading {
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    z-index: -1;
}
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
my-app:empty + .loading {
    opacity: 1;
    z-index: 100;
}

This approach works better if you put all heavy scripts before closing body tag and leave just minimal styles necessary to the loading screen in the head so it shows up as soon as possible and then scripts start to load.

Here is a simple demo:

Demo: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview