スピナー

hc-spinner は、「ビジー」/ 保留状態のための純 CSS の回転リングです。JavaScript はありません: CSS でアニメーションし、デフォルトで currentColor に従い、リクエスト駆動の表示のために htmx の .htmx-indicator クラスと組み合います。

別名: ローダー、ローディングインジケーター。

基本の HTML

<span class="hc-spinner" role="status" aria-label="Loading"></span>

スピナーはインジケーターの色を周囲のテキスト(currentColor)から継承するため、ボタン、バッジ、本文の中に自然に収まります。

サイズ

data-size="sm" または data-size="lg" を設定します。省略するとデフォルトの medium です。

<span class="hc-spinner" data-size="sm" role="status" aria-label="Loading"></span>
<span class="hc-spinner" role="status" aria-label="Loading"></span>
<span class="hc-spinner" data-size="lg" role="status" aria-label="Loading"></span>

バリアント

デフォルトでインジケーターは currentColor を使います。 data-variant はそれを semantic のアクセントに差し替えます — スピナーが色つきテキストの中にないときに便利です。

<span class="hc-spinner" role="status" aria-label="Loading"></span>
<span class="hc-spinner" data-variant="primary" role="status" aria-label="Loading"></span>
<span class="hc-spinner" data-variant="success" role="status" aria-label="Loading"></span>
<span class="hc-spinner" data-variant="warning" role="status" aria-label="Loading"></span>
<span class="hc-spinner" data-variant="error" role="status" aria-label="Loading"></span>

バリアント	インジケーターの色
省略	`currentColor`(継承)。
`primary`	アクセント / primary アクション。
`success`	成功の緑。
`warning`	警告のアンバー。
`error`	エラーの赤。

htmx での利用

htmx-indicator クラスを足すと、htmx が駆動するリクエストの実行中だけスピナーがフェードインします — 自前の JS は不要。ネットワークの所有者はボタンのままです。

<button class="hc-button" data-hx-post="/save" data-hx-disabled-elt="this">
  Save
  <span class="hc-spinner htmx-indicator" aria-hidden="true"></span>
</button>

ここでのスピナーは装飾(aria-hidden="true")です。無効化されたボタンとスワップされるレスポンスがすでに進行を伝えているからです。スピナーが唯一のシグナルであるときは、代わりにステータスの名前を与えてください — 下記を参照。

アクセシビリティ

スピナーは視覚表現です。「ビジー」の意味はテキストとして支援技術へ届かなければなりません。2 つのパターン:

スピナー自身に名前を付ける — アクセシブルな名前つきのライブ領域にします:
```

```
視覚的に隠したラベルで包む — スピナーは装飾のままにして、テキストを兄弟に置きます。より豊かな文言が欲しいときはこちら:
```

 
 Loading results…

```

Reduced motion: prefers-reduced-motion: reduce の下では回転は遅くなりますが止まりません — 作業が進行中であることを伝え続けなければならないからです。アクセシブルな名前は動きにかかわらず読み上げ続けるため、ステータスがアニメーションだけで伝えられることはありません。
名前のない空の role="status" を残さないでください。無名のライブ領域は何も読み上げません。

テーマ用トークン

トークンパス	用途
`spinner.size`	デフォルト(medium)の直径。
`spinner.sm-size` / `lg-size`	`data-size` の直径。
`spinner.border-width`	リングの太さ。
`spinner.track-color`	薄い全周リング(テーマの border)。
`spinner.indicator-color`	先頭の弧(デフォルト currentColor)。
`spinner.duration`	1 回転の時間。
`spinner.reduced-duration`	reduced motion 下の回転。
`spinner.{primary,success,warning,error}-color`	`data-variant` のインジケーター色。

CSS 変数

生成される CSS 変数を表示

--hc-spinner-size | -sm-size | -lg-size
--hc-spinner-border-width | -track-color | -indicator-color
--hc-spinner-duration | -reduced-duration
--hc-spinner-primary-color | -success-color | -warning-color | -error-color