Nagashima Laboratory

ローディングアニメーション（JavaScript）

「イベント」の機能を使って、「load（全ての要素が読み込まれる）」までにアニメーションを表示させる効果を作ります。

キーワード：イベント（load）

作成例（完成イメージ）

【準備】フォルダ：javascript_loading

①JavaScriptを書くための準備で作成したフォルダ（空のHTML、CSS、JavaScriptが入っている）を準備します。GitHubからもダウンロードできます。

②フォルダの名前を「javascript_loading」に変更します

③ローディングアイコンを準備します。今回は icon8 のアイコンを使用しています。クレジットの表示が必要ですので、使用する場合は、自分でサイトからダウンロードの上、クレジット表記をしてください。他のアニメーション画像を用意してもかまいません。アイコン画像は、html と同じ階層に置くか、imagesフォルダに入れます。

→ icon 8 のクレジットの書き方

④作例はギャラリーサイト風にしています。コンテンツ部分に使う画像は各自で用意してもかまいません。同じ画像を使う方は、Githubからダウンロードしてください。

画像は images フォルダに入れます。

HTMLとCSSファイルの準備

まず、ローディングアニメーションが終わったあとのコンテンツ部分を用意します。

▼index.html

<body>
  <!--コンテンツ-->
  <header>
    <h1>Loading Animation</h1>
  </header>
  <main>
    <div class="list">
      <div class="photo">
        <img src="images/img01.png" alt="">
      </div>
      <div class="photo">
        <img src="images/img02.png" alt="">
      </div>

<!-- コードが長くなるため省略しています。画像を12枚並べてください -->

      <div class="photo">
        <img src="images/img12.png" alt="">
      </div>
    </div>
  </main>
  <footer>
    <p>© SampleSite / Icons by <a href="https://icons8.com/">icons8.com</a></p>
  </footer>
</body>

全てのコードを書くと長くなるので、画像挿入部分は一部省略しています。12枚分の画像を配置してください。フッター部分には、icon8のクレジットを入れています。他の画像を使う場合は、この表記は不要です。

▼style.css

body {
  margin: 0;
}

header {
  position: absolute;
  top: 0;
  left: 20px;
  z-index: 10;
}

footer {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}

.list {
  display: flex;
  flex-wrap: wrap;
}

.photo {
  width: 25%;
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: bottom;
}

ここまで入力したら確認します。画像が画面全体に配置される状態になります。コンテンツ部分の作り方は一つの例ですので、他の形でもかまいません。

ローディング画面の作成

次にローディング画面を作成します。

▼index.html

<body>
  <!-- ローディング画面 -->
  <div id="loading">
    <p class="loading-text">LOADING</p>
    <img class="spin" src="loading.png" alt="spin">
  </div>

  <!-- コンテンツ -->

<body>のすぐ後に挿入します。ローディング画像のファイル名やパスは自分が使うファイルに合わせてください。

▼style.css （一番下に挿入）

#loading {
  transition: all 3s; /*ローディングにかかる時間*/
  background-color: #FFF;
  z-index: 999;
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.loading-text {
  font-weight: bold;
  text-align: center;
}

.spin {
  width: 64px;
  height: auto;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

画面中央にローディングアニメーションを配置しています。

#loading の transition は、画面の切り替わりにかかる秒数です。数字を大きくすると、ゆっくりと切り替わるようになります。

.loaded は、あとでJavaScriptから呼び出すクラスです。ローディング画面を隠す設定を書いています。

ここまで入力したら確認します。ローディング画面が表示されます（ローディング画面のまま、次に進みませんが、現時点ではこの状態で合っています）。

イベントの設定（動作のきっかけを作る）

addEventListener() を使って、動作を引き起こすためのきっかけ（イベント）を設定します。

これからしたいことは「画面（ウィンドウ）が読み込み（load）されたら、ローディング画面を非表示する」ことです。

▼script.js

//画面が読み込まれたら animation を呼び出す
window.addEventListener('load', animation);
  • 何が：画面（window）が
  • どうなったら：読み込みされたら（loadされたら）
  • どうする：背景色を変える（animation という動作をさせる）

まだanimationの動作を定義していないので、この段階ではエラーになります。

関数を作る

▼script.js

// 定数の定義
const loading = document.getElementById('loading');

// cssクラスを追加する関数
function animation(){
  loading.classList.add('loaded');
}

//画面が読み込まれたら animation を呼び出す
window.addEventListener('load', animation);

classList は、CSSのクラス名を追加する設定です。ここでは、loading に対して、loaded クラスを追加しています。それによって、画面が読み込まれたときに、loadedクラスが有効になる仕掛けです。

【補足】クラス名を追加・削除する

▼追加するとき

要素.classList.add('クラス名');

▼削除するとき

要素.classList.remove('クラス名');

▼複数指定することも可能です

要素.classList.add('クラス名1', 'クラス名2');

要素.classList.remove('クラス名1', 'クラス名2');

【応用】別のローディングアニメーションに変更する

下記の作例では、spinkit というサイトのコードを使用してローディングアニメーションを追加しました。このサイトでは、アニメーションを画像ではなく、CSSで作成しています。HTMLとCSSのコードをコピーして使用します。MITライセンスです。

https://tobiasahlin.com/spinkit/

自分でGIFやAPNG（アニメーションPNG）を作成することにも挑戦してみてください。

【応用】ローディング画面の表示時間を設定する

これまでの作例は「画面の読み込みが完了する」ことを引き金にしているので、ページの読み込みが早い場合、アニメーションが表示されている時間は短くなります。アニメーション部分も見せたい、という場合には「指定秒後に関数を呼び出す」という方法もあります。

▼script.js

window.addEventListener('load', animation);

↓ 差し替え（addEventListerはコメントアウト）

// window.addEventListener('load', animation);

// 指定秒後に動作させる
window.setTimeout( animation, 2000 );

「2000」という数字は、ミリ秒（1000=1秒）で、2秒を表しています。数字を大きくするとローディング画面の時間が長くなります。あまりに長くすると読み込みが遅いように感じられるかもしれません。

「2秒経ったら動作させる」という意味なので、実際に読み込みが完了しているかどうかに関わらず、関数が呼び出されます。

下記の作例では、コンテンツ部分に画像を配置せず、背景の色を変更しています。

参考書籍・リンク