こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
サイトを訪問したときに、上部にスッと伸びるロードバーが表示されると「これから始まる感」が出て、ユーザーに安心感やワクワク感を与えられます。
特に情報量が多いサイトや、演出にこだわりたいポートフォリオサイトなどでは効果的です。
今回は、ページ読み込み時にロードバーが伸びるアニメーションをCSSとJavaScriptで簡単に実装する方法をご紹介します。
コピペでそのまま使えるデモコード付きなので、ぜひ試してみてください。
ロードバーの基本的な仕組み
ロードバーは画面上部に細いバーを配置し、JavaScriptでページの読み込み状態に合わせて横幅を伸ばす仕組みです。
今回の例では、シンプルに ページロード完了後にバーが右端まで伸びる演出 を作ります。
- CSSで細いバーを用意する
- JavaScriptでページロードイベントを検知する
- アニメーションで横幅を100%まで伸ばす
実装コード（コピペOK）
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードをコピペすれば、ページ読み込みと同時にロードバーが左から右にスッと伸びて消えるアニメーションを実現できます。
応用アイデア
- バーの色をグラデーションや虹色にして華やかにする
- 高さを太くして「プログレスバー」風にする
- フェードアウトを遅らせてローディング演出を強調する
ポイント
サイト全体のデザインに合わせて「バーの色・高さ・スピード」を調整すると、より自然で一体感のある演出に仕上がります。
まとめ
ページ読み込み時にロードバーを表示すると、ユーザーに「処理が進んでいる」という安心感を与えると同時に、サイト全体の完成度をぐっと高めることができます。
CSSとJavaScriptを組み合わせれば、たった数行で実装可能です。
satokotadesignキャンペーン実施中！
