Now Loading を研究し始めて、幾星霜・・・
色々なサイトのLoadingを見て、簡単にCSSで構築できると分かったら、見よう見まねで自作せずにはいられない体質になってしまいました。
今回は、パルス・ドット・ローダーという、極めてシンプルな、それでもって読み込み中の感じがバッチリ表現できるモノを持ってきました。
まずはデモをみて、色々と感じ取ってみてください。
デモ
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Loading</title>
</head>
<body>
<div class="loader">
<span></span>
</div>
</body>
</html>
style.css
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0f172a;
}
/* ローダー本体 */
.loader {
position: relative;
width: 20px;
height: 20px;
}
/* 中央のドット */
.loader::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #38bdf8;
z-index: 2;
}
/* 波紋（2つ重ねて遅延） */
.loader::after,
.loader span {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid #38bdf8;
animation: pulse 1.5s ease-out infinite;
opacity: 0;
}
.loader span {
animation-delay: 0.75s;
}
@keyframes pulse {
0% {
transform: scale(0.5);
opacity: 0.8;
}
70% {
transform: scale(3);
opacity: 0;
}
100% {
opacity: 0;
}
}
コード解説
丸に被さるように、輪っかが広がっていくだけで、パルス信号っぽい感じが出て、非常にわかりやすさ抜群ですね。
暗い背景の画面の中心に、ポツンと表示するだけでも、いい感じの雰囲気が醸し出せます。
輪っかを蓮速で続けて拡大しては消してを繰り返すのですが、消えている途中から、次の輪っかを表示するため、
擬似要素を２つ（::beforeと、::after）を使っています。
さほど難しいことはやっていないのですが、1.5秒の間隔で、片方を0.75秒（半分の時間）animation-delayでずらしてあげることで、簡単に実現できます。
あとがき
こういうシンプルなCSSコードでも、ライブラリとして自分のストックで持っておくことで、仕事ですぐに使えて便利なんですよね。
ほぼコピペでで設置できるようにしておくことで、一段レベルの高いホームページのように見えちゃうんですよね。
読み込みが遅いページだと特にそう。
SEO的に、Loaderがいいか悪いか論争は、Googleのみぞ知っていることなので、そこには我関せずです。
とにかく、こういう処理を入れると、クライアントさんが気に入ってくれて、仕事もすこぶる調子が良くなるわけなんですよね。
0 件のコメント:
コメントを投稿