Angularで初回ロード中画面を設定する

6786 ワード
angular-cli Angular Angular テキストリンク

小ネタです。
Angluarで作ったSPAの初回ロード時のロード中画面を設定する方法です。

前提

今回紹介する内容は、以下のバージョンのangluar-cliで作成したAngularのプロジェクトで確認しています。

$ ng -v
...
@angular/cli: 1.4.9
node: 8.8.1
os: darwin x64

手順

ひとまず文字だけ表示する

方法は至って簡単で、src/index.htmlの<app-root>内に表示させたい文字を入力するだけです。
AppComponentはangluar-cliで作成したAngluarアプリのブートストラップ(エントリーポイント)となっており、AppComponentの内容が完全に読み込まれるまでの間、ココに入力した文字ロード中画面として画面に表示されます。

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularTest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>   <!-- ココ -->
</body>
</html>

angular-cliで作成したAngluar 2系のサンプルなどを見ると、app-root内にLoading...の文字が入っているのを見かけますが、現在最新のangluar-cliを使って作成したプロジェクトではapp-root内には何も記述されていない状態でindex.htmlが生成されるようです。

表示

CSSでちょっといい感じにスタイリングする

app-root内にstyleタグを使ってを記述していきます。
How TO - CSS Loader を参考に円状のローダーを作成しました。

index.html
...
  <app-root> 
    <style>
    app-root {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      color: gray;
    }
    .loader {
      border: 16px solid #f3f3f3;
      border-top: 16px solid #4055ae;
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .loader-text {
      display: block;
      margin-top: 1em;
    }
    </style>
    <div class="loader"></div>
    <span class="loader-text">Loading...</span>
  </app-root>
...

表示

その他

レイアウトの確認や、デバッグ時にはChromeデベロッパーツールで擬似的に回線速度を落としリソースの読み込みタイミングを遅らせるなどするとスムーズです。
参考: Chromeデベロッパーツールで実機の回線速度を再現してコーディング