「CSSを制するものは、Webページを制す」
こんな志の元、そのホームページで誰もが目にする、Now Loading をブログで追求する活動をしています。
最近では、AIがある程度までは作ってくれますが、最後の仕上げはどうしても人間が行わないと、ちゃんとしたコードが出来上がりません。（2026年5月現在では）
今回はかなりシンプルな見た目と、安定の Loading を表現してみました。
デモ
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Loading</title>
</head>
<body>
<div class="loader"></div>
</body>
</html>
style.css
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0f172a;
}
/* ローディング本体 */
.loader {
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
animation: rotate 1.2s linear infinite;
}
/* グラデーションリング */
.loader::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(
#38bdf8,
#6366f1,
#ec4899,
#38bdf8
);
mask: radial-gradient(farthest-side, transparent 60%, black 61%);
-webkit-mask: radial-gradient(farthest-side, transparent 60%, black 61%);
}
/* 中央の抜き（ガラスっぽく） */
.loader::after {
content: "";
position: absolute;
inset: 12px;
border-radius: 50%;
background: #0f172a;
}
/* 回転アニメ */
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
解説
円形のグラデーションが、ぐるっと回転する、見た目綺麗なデザインです。
アニメーションは、1.2秒かけて360度回転させているだけなので、コードも非常にシンプルです。
ドーナツ型にくり抜いたグラデーションの作り方は、実はくり抜いているわけではなく、周辺と同じ色で塗りつぶしているだけなので、背景が単色でない場合は、clip-path()やmask()を使ってちゃんとくり抜いた方がいいです（スミマセン手抜きで）
でも、Now Loadingは、ページ内の画像などの読み込みのための処理なので、単色で十分ということで、この仕様にしています。
あ、これ書いていて気がついたんですが、ページロード以外にも、Ajaxを使った、アップロードや、個別エレメント箇所などでの、動機待ちみたいな処理の場合のために、抜き色バージョンも用意しておいた方がいいですね。
抜き色改良版
.loader::afterを削除して、.loader::beforeのmask指定を以下に置き換えてください。
-webkit-mask: radial-gradient(circle, transparent 55%, black 56%);
mask: radial-gradient(circle, transparent 55%, black 56%);
念の為、css全体のコードも掲載しておきます。
style.css
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #0f172a;
}
/* ローダー */
.loader {
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
animation: rotate 1.2s linear infinite;
}
/* グラデーションリング（くり抜き） */
.loader::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(
#38bdf8,
#6366f1,
#ec4899,
#38bdf8
);
/* ここが本質：内側をくり抜く */
-webkit-mask: radial-gradient(circle, transparent 55%, black 56%);
mask: radial-gradient(circle, transparent 55%, black 56%);
}
/* 回転 */
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
あとがき
Now Loading は、凝れば凝るほど見た目の綺麗さも、受け取り手の面白さもアップしますが、「シンプルにする」ということは非常に重要です。
今回ぐらいのコードであれば、cssファイルを外部にして読み込みをするよりは、HTMLに書き込んだ方が効率的です。
そもそも、読み込みを待つための Now Loading なので、そのコード自体の読み込みが遅くなってしまうようでは、本末転倒ですからね。
改めて効率が良くて、見た目も、面白さも追求して、できるだけ離脱を防げるモノを追求したくなってきましたね。
こういうCSSのコード制作は、個人的に楽しいので、この CSS Now Loading は、シリーズ化していきたいと思います。
0 件のコメント:
コメントを投稿