We Blog Weblog

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

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>

まとめ

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

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

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

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP