ローディングアニメーション
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>
まとめ
どれにするか迷ってしまいますね。
シンプルなやつもいいなぁ。
オリジナルのローディングアニメーションをいつか作ってみたいです!