Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

小ネタです。
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が生成されるようです。

表示

スクリーンショット 2017-11-02 0.40.41.png

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

表示

スクリーンショット 2017-11-02 0.40.52.png

その他

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away