Puedo sugerir un enfoque CSS simple.

En primer lugar, agregue .loading div en la página HTML principal, debe seguir al elemento principal del componente de la aplicación. Por ejemplo:

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

Ahora puede orientar y diseñar la pantalla de inicio con my-app:empty + .loading CSS selector, y hacer que desaparezca tan pronto como la aplicación se inicie. Ejemplo:

 /* 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; }

Este enfoque funciona mejor si coloca todas las secuencias de comandos pesadas antes de cerrar la etiqueta del cuerpo y deja solo los estilos mínimos necesarios para la pantalla de carga en el encabezado para que aparezca lo antes posible y luego las secuencias de comandos comiencen a cargarse.

Aquí hay una demostración simple:

Demostración: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview

Fui con un enfoque simple (aunque también me gustó la otra respuesta) usando los hilanderos FontAwesome:

 <app-root> <div class="text-center"> <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i> <div>Something witty for your userbase</div> </div> </app-root>

¿Por qué no probar este enfoque?

 <app-root> <style type="text/css"> #pre-bootstrap { background-color: #262626; bottom: 0px; left: 0px; position: fixed; right: 0px; top: 0px; z-index: 999999; } #pre-bootstrap div.messaging { color: #FFFFFF; font-family: monospace; left: 0px; margin-top: -37px; position: absolute; right: 0px; text-align: center; top: 50%; } #pre-bootstrap h1 { font-size: 26px; line-height: 35px; margin: 0px 0px 20px 0px; } #pre-bootstrap p { font-size: 18px; line-height: 14px; margin: 0px 0px 0px 0px; } </style> <div id="pre-bootstrap"> <div class="messaging"> <h1> App is Loading </h1> <p> Please stand by for your ticket to awesome-town! </p> </div> </div> </app-root>