こんにちは、制作担当のI.Sです。
今回はページローディングのプログレスバーの実装についてご紹介します。
ロードを視覚的に見やすくするアレです。
目次
1.実装例
2.解説
3.カスタマイズ
4.まとめ
1.実装例
See the Pen
B ローディング プログレスバー by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
※右下の「Rerun」で何度も再生できます。
プログレスバーが画面端まで行くと、コンテンツが表示されます。
以前のローディングと同様、簡単に実装できます。
2.解説
それではCSSでどのように制御しているのか、解説していきます。
ローディング時の画面はすべて疑似要素で作成しています。
ローディング時の背景の記述
まずはローディング時に表示される背景です。
今回だと濃い藍色の部分です。
「width:100%」と「height:100vh」で全画面表示をし、背景色を設定します。
その後はkeyframeを使い、アニメーションの記述をします。
アニメーションの内容を説明すると、
「ローディング時間の99%まで通常表示し、100%になると透過して消える」
といった感じになります。
プログレスバーの記述
高さを指定し、色を設定します。
top:0; で画面上部に配置、left:0;が開始位置になります。
先ほどと同じくkeyframeでアニメーションを記述します。
内容は
「ローディング時間の99%まで通常表示し、100%で幅いっぱいにバーが伸び、非表示になる」
という感じです。
ローディング背景の注意点
See the Pen
B ローディング プログレスバー 2 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
ローディング時の背景ですが、最後にz-index:-1;を入れないと↑のようになります。
意味のないリンクがクリックできないと思います。
どういうことかというと、透明なフィルターがかかった状態になり、リンクが押せなくなっています。
背景は透明にしただけで、まだその場所に存在しております。
なので、z-indexで位置を指定しないとこのような現象が起こります。
※プログレスバーも同様です。
3.カスタマイズ
See the Pen
B プログレスバー 03 by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
背景色とバーの色、ローディングの長さも変えてみました。
以前のローディングと同じく、カスタマイズ性が高いです。
配色やデザイン性ではさらにおしゃれにできます。
4.まとめ
少し工夫すれば、ゆっくりと表示させることもできます。
解説でも言いましたが、動き自体は簡単にできます。あとはデザイン次第です。
ではまた.
