ローディングアニメーション

Web

2022年9月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、ページの読み込み時に表示する「ローディングアニメーション」を作ってみたいと思います。

参考：Webクリエイターボックス｜CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法

参考：Recooord｜CSS コピペだけで実装できるローディングアニメーション！

ブログ一覧ページが重いッ

うちのブログ一覧ページはとにかく重いです。本当にすまないと思っている。

エコーズ3FREEZE!!くらい重いです。

侘助くらい重いです。
命を刈り奪る形をしています（それ違うやつや）

何とかしましょう。

読み込み時間を短縮することを最優先にしつつ、待ち時間のストレスを軽減する工夫をしてみます。

準備

まずはloaderというクラスを付与したdiv要素を設置します。
場所は<body>の直下でいいと思います。

<div class="loader"></div>

さらにloader-wrapで囲みます。

<div class="loader-wrap">
  <div class="loader"></div>
</div>

loader-wrapのCSSを設定します。

.loader-wrap {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: 背景色のカラーコード;
  z-index: 99999;
}

うちのサイトではハンバーガーメニューやトップへ戻る矢印のz-indexを9999にしてしまっているのでそれより大きな値を入れましたが、最前面に表示されるのであれば数値は何でもいいと思います。

以下のスクリプトを記述します。

$(function() {
  var loader = $('.loader-wrap');

  $(window).on('load', function() {
    loader.fadeOut();
  });

  setTimeout(function() {
    loader.fadeOut();
  }, 3000);
});

「ページの読み込みが完了したらloader-wrapを非表示にする」

「読み込みが完了していなくても3秒たったら非表示にする」

という命令だそうです。勉強になりました。

アニメーション設定

参考：フォトピザ｜CSSで作るローディングアニメーション40選〜待ち時間を楽しくするテクニック

ローディングアニメーションのHTMLやCSSがいろいろ公開されているので参考にしてみましょう。

今回はLoaders.cssの「pacman」を参考にしました。

GitHubにアクセスしてzipをダウンロード→解凍して出てきたloaders.cssを読み込ませます。

<link rel="stylesheet" href="css/loaders.css">

HTMLに以下のコードを追加します。

<div class="loader-wrap">
  <div class="loader">
    <div class="loader-inner pacman">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</div>

まとめ

どれにするか迷ってしまいますね。
シンプルなやつもいいなぁ。

オリジナルのローディングアニメーションをいつか作ってみたいです！

この記事を書いた人

みやの

Web・DTP担当

We Blog Weblog