Conic Spinner

DEMO

<div class="demo-stage cns-stage">
  <div class="cns-row">
    <div class="cns-item"><span class="cns cns-tail" aria-hidden="true"></span><span class="cns-cap">グラデーション</span></div>
    <div class="cns-item"><span class="cns cns-ticks" aria-hidden="true"></span><span class="cns-cap">目盛り</span></div>
    <div class="cns-item"><span class="cns cns-duo" aria-hidden="true"></span><span class="cns-cap">2色</span></div>
  </div>
  <p class="cns-sr" role="status">読み込み中</p>
</div>

.cns-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; background:#0B0B10; min-height:260px; }
.cns-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.cns-row { display:flex; flex-wrap:wrap; gap:2rem; justify-content:center; }
.cns-item { display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.cns { --cns-bg:#0B0B10; position:relative; width:56px; height:56px; border-radius:50%; animation: cns-spin 1s linear infinite; }
.cns::after { content:''; position:absolute; inset:6px; border-radius:50%; background:var(--cns-bg); }
.cns-tail { background:conic-gradient(from 0deg, rgba(233,27,137,0) 0deg, #E91B89 300deg, #F9A8D4 360deg); }
.cns-ticks { background:conic-gradient(rgba(91,170,222,0.175) 0deg 18deg, transparent 18deg 30deg, rgba(91,170,222,0.25) 30deg 48deg, transparent 48deg 60deg, rgba(91,170,222,0.325) 60deg 78deg, transparent 78deg 90deg, rgba(91,170,222,0.4) 90deg 108deg, transparent 108deg 120deg, rgba(91,170,222,0.475) 120deg 138deg, transparent 138deg 150deg, rgba(91,170,222,0.55) 150deg 168deg, transparent 168deg 180deg, rgba(91,170,222,0.625) 180deg 198deg, transparent 198deg 210deg, rgba(91,170,222,0.7) 210deg 228deg, transparent 228deg 240deg, rgba(91,170,222,0.775) 240deg 258deg, transparent 258deg 270deg, rgba(91,170,222,0.85) 270deg 288deg, transparent 288deg 300deg, rgba(91,170,222,0.925) 300deg 318deg, transparent 318deg 330deg, rgba(91,170,222,1.0) 330deg 348deg, transparent 348deg 360deg); animation-timing-function:steps(12, end); }
.cns-ticks::after { inset:10px; }
.cns-duo { background:conic-gradient(#E91B89 0deg 90deg, rgba(255,255,255,.12) 90deg 180deg, #7B37A8 180deg 270deg, rgba(255,255,255,.12) 270deg 360deg); animation-duration:1.4s; }
.cns-cap { color:#A1A1AA; font-size:.74rem; }
@keyframes cns-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cns { animation:none; }
}

AI PROMPT

CSS の conic-gradient だけで作るスピナーを3種類作って（画像・SVG・JavaScript は使わない）。共通部分：幅と高さ56px・border-radius:50% の要素に円の塗りを conic-gradient で描き、@keyframes で rotate(360deg) まで1秒 linear の無限ループで回す。中を空洞に見せるため ::after を inset:6px・背景と同じ色の円で重ねる（背景色はカスタムプロパティ --cns-bg で持たせて差し替えやすくする）。1つ目は尾を引くグラデーション：conic-gradient(from 0deg, 透明 0deg, ピンク 300deg, 淡いピンク 360deg) で、回転の先頭がはっきり見え、後ろは透明に消えていく。2つ目は目盛り：conic-gradient で30度ごとに18度幅の目盛りを12本描き、1本ごとに不透明度を .175 から 1 まで時計回りに少しずつ上げる（repeating-conic-gradient で12本を同じ濃さにすると、30度ずつ回しても絵が変わらず止まって見えるため）。中の空洞は inset:10px にして目盛りを短くし、animation-timing-function: steps(12, end) で30度ずつカクッと回す。3つ目は2色：ピンク・薄い灰色・紫・薄い灰色を90度ずつ塗り分け、1.4秒で回す。スピナー本体は aria-hidden="true" にし、role="status" の視覚的に隠した段落で「読み込み中」と伝える。@media (prefers-reduced-motion: reduce) では回転を止める。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。