こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトを訪問した際、読み込み中のローディング画面を目にすることはありませんか？
ただの「ローディング中…」ではなく、100%から0%にカウントダウンするアニメーションを加えることで、ユーザーに「待たされている感覚」を減らし、体感速度を向上させることができます。
ローディング画面は、Webサイトの印象を決める大切な要素のひとつです。
特に、おしゃれなサイトやブランドサイトでは、シンプルかつ洗練されたローディング演出が求められます。
今回は、HTML・CSS・JavaScriptを使って100%から0%にカウントダウンするローディングアニメーションを作成し、
カウントが終わると スムーズにフェードアウトする動き まで実装します。
どんなサイトにも応用できるので、ぜひ試してみてください！
1. HTML・CSS・JavaScriptでカウントダウンアニメーションを作る
【実装のポイント】
- ローディング画面（#loading-screen）を最前面に配置
- カウントダウンの数字を#countに表示
- JavaScriptで100%から0%までカウントダウンし、完了後にフェードアウト
【実装コード】
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
2. コードの解説
1 ローディング画面のデザイン（CSS）
背景を黒（#000）、文字を白（#fff）にしてシンプルなデザイン
display: flex; を使い、カウントを画面中央に配置
@keyframes fadeOut を使い、ローディング画面をフェードアウトさせる
2 JavaScriptでカウントダウンを実装
setTimeout(updateCount, 30); を使って30msごとに1%ずつ減少カウントが0になったら、ローディング画面をフェードアウト
まとめ
ローディングカウントアニメーションのポイント
- 100%から0%までカウントダウンしながら数字を表示
- カウント終了後、ローディング画面をフェードアウト
- JavaScriptとCSSアニメーションを組み合わせて実装
このアニメーションをWebサイトに追加すると、ローディング画面に動きを持たせることで、ユーザー体験を向上できます！
数値やアニメーションの速さは、用途に応じてカスタマイズしてみてください。