Tela de carregamento pré-bootstrap para Angular2

Eu estou procurando uma canvas de carregamento pré-bootstrap ao longo das linhas deste exemplo, mas para Angular2.

Eu posso sugerir uma abordagem CSS simples.

Primeiro de tudo, adicione .loading div na página HTML principal, ele deve seguir o elemento principal do componente do aplicativo. Por exemplo:

  

Loading...

Agora você pode segmentar e estilizar a canvas inicial com my-app:empty + .loading seletor CSS my-app:empty + .loading e fazê-lo desaparecer assim que o aplicativo for inicializado. Exemplo:

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

Essa abordagem funciona melhor se você colocar todos os scripts pesados ​​antes de fechar a tag body e deixar apenas os estilos mínimos necessários para a canvas de carregamento na cabeça, de forma que ela apareça o mais rápido possível e os scripts comecem a carregar.

Aqui está uma demonstração simples:

Demonstração: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview

Eu fui com uma abordagem simples (eu gostei da outra resposta também) usando spinners FontAwesome:

  
Something witty for your userbase

Por que não tentar esta abordagem:

   

App is Loading

Please stand by for your ticket to awesome-town!

Eu acho que a melhor abordagem é ter o estilo inline no carregamento de HTML div (para mostrar). Em seguida, em css, você tem uma class para ocultar e usar o ngOnInit para include essa class na div de carregamento.

Nesse caso teremos o html renderizando o estilo primeiro .. mostrando o carregamento e depois de tudo (baixe css e execute js) ele terá a class que o oculta.

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

Você pode fazer algo assim: