Pantalla de carga previa a Bootstrap para Angular2

Estoy buscando una pantalla de carga previa al arranque a lo largo de las líneas de este ejemplo, pero para Angular2.

Puedo sugerir un enfoque simple de CSS.

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

  

Loading...

Ahora puede orientar y personalizar la pantalla de bienvenida con my-app:empty + .loading selector de CSS, y hacer que desaparezca tan pronto como la aplicación se obtenga bootstraped. 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 todos los scripts pesados ​​antes de cerrar la etiqueta del cuerpo y deja solo los estilos mínimos necesarios para la pantalla de carga en el cabezal para que se muestren lo antes posible y luego los scripts comiencen a cargarse.

Aquí hay una demostración simple:

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

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

  
Something witty for your userbase

Por qué no probar este enfoque:

   

App is Loading

Please stand by for your ticket to awesome-town!

Supongo que el mejor enfoque es tener el estilo en línea en el HTML cargando div (para mostrar). Luego, en CSS, tienes una clase para ocultar y usar ngOnInit para incluir esa clase en el div de carga.

En ese caso tendremos el html representando el estilo primero … mostrando la carga y después de todo (descarga css y ejecuta js) tendrá la clase que lo oculta.

 export class AppComponent implements OnInit { public loaded=false; ngOnInit() { this.loaded=true; } } 
  .loading.loaded { z-index: -1; opacity: 0; } 
 

Puedes hacer algo como esto:

 < !doctype html>