Экран загрузки предварительной загрузки для Angular2

Ответ 1

Я могу предложить простой подход CSS.

Прежде всего добавьте .loading div в основную HTML-страницу, он должен следовать основному элементу компонента приложения. Например:

<my-app></my-app>

<div class="loading">
    <h1>Loading...</h1>
</div>

Теперь вы можете настроить таргетинг и стиль заставки с помощью селектора my-app:empty + .loading CSS и заставить его исчезнуть, как только приложение получит bootstraped. Пример:

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

Этот подход работает лучше, если вы ставите все тяжелые сценарии перед закрытием тега тела и оставляете минимальные стили, необходимые для экрана загрузки в голове, чтобы он отображался как можно скорее, а затем скрипты начали загружаться.

Вот простая демонстрация:

Демо: http://plnkr.co/edit/v8FtkSluRDSrkcq4v7a1?p=preview

Ответ 2

Я пошел с простым подходом (мне тоже понравился другой ответ), используя FontAwesome spinners:

<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>

Ответ 3

Почему бы не попробовать этот подход:

<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>

Ответ 4

Я предполагаю, что лучший подход заключается в том, чтобы иметь встроенный стиль в загрузочном div HTML (для отображения). Затем в css у вас есть класс, чтобы скрыть и использовать ngOnInit, чтобы включить этот класс в загрузочный div.

В этом случае у нас будет html-рендеринг стиля в начале. Показывая загрузку и после всех (скачайте css и запустите js), у него будет класс, который скрывает его.

export class AppComponent implements OnInit {
  public loaded=false;

  ngOnInit() {
    this.loaded=true;
  }
 }

 .loading.loaded {
     z-index: -1;
     opacity: 0;
  }

<div class="loading" 

    style="opacity: 0.9;
       color: #EEE;
      position: absolute;
      top: 0;
      width: 100%;
      text-align: center;
      transition: opacity .8s ease-in-out;
      height: 100%;
      background: #fff;
      z-index: 100;
      display: table;"
      
  [class.loaded]="loaded">
  
      <md-spinner 
        style="display: table-cell;
        vertical-align: middle;"
        ></md-spinner>
        
  </div>