Sibling Index Spinner

DEMO

<div class="demo-stage sbi-stage">
  <div class="sbi-ring" id="sbi-ring" role="img" aria-label="読み込み中">
    <span class="sbi-dot"></span><span class="sbi-dot"></span><span class="sbi-dot"></span><span class="sbi-dot"></span>
    <span class="sbi-dot"></span><span class="sbi-dot"></span><span class="sbi-dot"></span><span class="sbi-dot"></span>
  </div>
  <div class="sbi-ctrl">
    <button type="button" class="sbi-btn" id="sbi-minus" aria-label="点を減らす">−</button>
    <output class="sbi-count" id="sbi-count" aria-live="polite">点 8 個</output>
    <button type="button" class="sbi-btn" id="sbi-plus" aria-label="点を増やす">＋</button>
  </div>
</div>

.sbi-stage { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; padding:2rem 1.25rem; background:#0B0B10; min-height:300px; }
.sbi-ring { position:relative; width:120px; height:120px; }
.sbi-dot {
  /* 何番目か（1から）と兄弟の数。未対応ブラウザでは JavaScript が同じ名前で上書きする */
  --i: sibling-index();
  --n: sibling-count();
  --a: calc(360deg / var(--n) * (var(--i) - 1));   /* 自分の角度 */
  position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%;
  background:#F472B6;
  /* sin() と cos() で円周上の位置を出す（scale のアニメーションで半径が変わらない） */
  left: calc(50% + sin(var(--a)) * 48px);
  top: calc(50% - cos(var(--a)) * 48px);
  animation: sbi-fade 1.2s linear infinite;
  animation-delay: calc(1.2s / var(--n) * (var(--i) - 1) - 1.2s);
}
@keyframes sbi-fade { 0% { opacity:1; scale:1.25; } 100% { opacity:.18; scale:.7; } }
.sbi-ctrl { display:flex; align-items:center; gap:.8rem; }
.sbi-btn { width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:transparent; color:#EDEDED; font-size:1.2rem; cursor:pointer; }
.sbi-btn[aria-disabled="true"] { opacity:.35; cursor:default; }   /* disabled にするとフォーカスが外れるので aria-disabled にする */
.sbi-btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.sbi-count { min-width:5.5em; text-align:center; color:#C9C9D1; font-size:.84rem; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .sbi-dot { animation:none; opacity:calc(1 - (var(--i) - 1) / var(--n) * .8); }
}

(function(){
  var ring = document.getElementById('sbi-ring');
  var minus = document.getElementById('sbi-minus');
  var plus = document.getElementById('sbi-plus');
  var count = document.getElementById('sbi-count');
  if (!ring || !minus || !plus || !count) return;
  var native = window.CSS && CSS.supports && CSS.supports('width', 'calc(sibling-index() * 1px)');
  var MIN = 4, MAX = 16;
  function sync(){
    var dots = ring.children, n = dots.length;
    if (!native) {   /* 未対応のブラウザだけ、番号と数をインラインで渡す */
      for (var i = 0; i < n; i++) { dots[i].style.setProperty('--i', i + 1); dots[i].style.setProperty('--n', n); }
    }
    count.textContent = '点 ' + n + ' 個';
    minus.setAttribute('aria-disabled', String(n <= MIN)); plus.setAttribute('aria-disabled', String(n >= MAX));
  }
  plus.addEventListener('click', function(){
    if (ring.children.length >= MAX) return;
    var d = document.createElement('span'); d.className = 'sbi-dot'; ring.appendChild(d); sync();
  });
  minus.addEventListener('click', function(){
    if (ring.children.length <= MIN) return;
    ring.lastElementChild.remove(); sync();
  });
  sync();
})();

AI PROMPT

円周に並んだ点が順番に明るくなるローディングのスピナーを、CSS の sibling-index() と sibling-count() で作って。幅と高さ120px の枠（position:relative・role="img"・aria-label="読み込み中"）に span の点を8個入れる。各点に --i: sibling-index()（1から始まる自分の番号）と --n: sibling-count()（兄弟の数）を定義し、角度 --a: calc(360deg / var(--n) * (var(--i) - 1)) を出し、left: calc(50% + sin(var(--a)) * 48px)・top: calc(50% - cos(var(--a)) * 48px) で円周に並べる（transform の rotate と translateY で並べると、アニメーションの scale が translateY の内側に掛かって点が半径方向に動いてしまうため、位置は top/left で決める）。@keyframes で opacity 1・scale 1.25 から opacity .18・scale .7 へ 1.2秒で変わるアニメーションを繰り返し、animation-delay を calc(1.2s / var(--n) * (var(--i) - 1) - 1.2s) にして、番号順に光が回るように見せる（負の遅延で最初から途中の状態で始まる）。点を増やす・減らすボタン（4〜16個・端では disabled ではなく aria-disabled="true" にして薄く表示し、押しても何もしない＝disabled にするとキーボードのフォーカスが外れるため）と、「点 n 個」の表示を付け、点の数が変わっても CSS は書き換えずに角度と時間差が自動で揃うことを見せる。CSS.supports('width','calc(sibling-index() * 1px)') が false のブラウザだけ、JavaScript で各点に --i と --n をインラインで設定する。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アソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。