ページを読み込み中に表示するローディング画面は、現在ページを読み込んでいると思ってもらうためや、会社や店舗のイメージを伝えるためにも、あると良い演出です。
色々なアニメーションのローディングがありますが、今回は会社や店舗などのオリジナルロゴや画像をシンプルに表示するローディング画面をご紹介します。
まずはデモページをご覧ください。
※なるべくローディング表示が長くなるように、ページを重たくしています。
それでは、作り方を解説します。
HTML
<div class="loader"></div>
</div>
「<body>」直下にローディング用の「div」を書きます。
javascript
window.onload = function () {
const loader_element = document.getElementById('loader_wrap');
loader_element.classList.add('loaded');
};
</script>
「javascript」もHTMLに書いてOKです。「</body>」の直前に書いておきましょう。
これは、ページの読み込みが完了したら「loader_wrap」IDに「loaded」という「class」を追加するという命令です。
CSS
#loader_wrap {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
top: 0;
background: #fff;
}
/* ローディングアニメーションの設定 */
.loader {
width: 150px;
height: 150px;
background: url("../img/logo.png") no-repeat;
opacity: 0;
animation: blink 1.5s infinite linear;
}
@keyframes blink {
50% {
opacity: 1;
}
}
/* ローディング終了後 */
.loaded {
opacity: 0;
visibility: hidden;
}
順番に解説していきます。
「#loader_wrap」は画面全体の設定で、画面を白背景で覆って、ロゴなどの要素を縦横中央に配置する内容です。
「.loader」はローディングアニメーションの設定で、ロゴ画像の読み込みと、点滅するアニメーションを設定しています。
「.loaded」はローディング終了後の設定で、ローディング画面を非表示にする内容です。
上記の「javascript」で、読み込み完了後に「loaded」を「class」で追加するので、「loaded」を読み込むことでローディング画面が非表示になるというわけです。
以上で完了です。
ちなみに「ローディングアニメーションの設定」部分を編集する事で、別のアニメーションにする事もできます。
ローディングアニメーションをコピペできるサービスは幾つもありますが、今回は下記のサイトを利用してみましょう。
https://projects.lukehaas.me/css-loaders/
まずは色の設定で、背景色を白にし、アニメーションの色をピンクに設定してみます。
その後「< View Source >」をクリックするとコードが表示されるので、コピーします。
コピーしたコードを「ローディングアニメーションの設定」部分と差し替えます。
「ローディング終了後」の内容は残しておいてください。
反映後のページを見てみましょう。
別バージョンを見る
いかがでしょうか。
個人的にはロゴ画像の方が好きですね。
今回は点滅にしていますが、アニメーションの設定を編集すれば、ゆらゆら動いたり上下左右に動いたりなど色々出来ると思います。
デモページのファイル一式をご希望の方は、下記よりダウンロードしてください。
※ファイルが重たくなるので、画像は外しています。
【 css46.zip（16KB） 】