angular - Pre-Bootstrap Loading Screen For Angular2 -

i'm looking pre-bootstrap loading screen along lines of this example angular2.

i can suggest simple css approach.

first of add .loading div main html page, should follow main app component element. example:

<my-app></my-app>  <div class="loading">     <h1>loading...</h1> </div> 

now can target , style splash screen my-app:empty + .loading css selector, , make disappear app gets bootstraped. example:

/* default .loading styles, .loading should 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 visible when app not bootstraped yet, .my-app empty */ my-app:empty + .loading {     opacity: 1;     z-index: 100; } 

this approach works better if put heavy scripts before closing body tag , leave minimal styles necessary loading screen in head shows possible , scripts start load.

here simple demo:

demo: http://plnkr.co/edit/v8ftkslurdsrkcq4v7a1?p=preview