Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pre-bootstrap loading screen

Tags:

angular

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

like image 714
netlander Avatar asked Feb 06 '16 16:02

netlander


1 Answers

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

like image 82
dfsq Avatar answered Oct 10 '22 07:10

dfsq