Spinner

回転はトークンが持っています

スピナーの形と大きさだけがこのコンポーネントのもので、回転はトークン層にあります。 data-sg-spinner を付けた要素が回るので、素の CSS の利用者も同じものを得られます。

周期はループのスケールから来ています。生の数値は書いていません。

動きだけで状態を伝えません

動きを減らす設定（prefers-reduced-motion）では止まります。 スケルトンと同じ判断です。

止まったスピナーからは進行が読み取れないので、名前を型で必須にしてあります。

<Spinner aria-label="読み込み中" />

すでに名前を持つものの中に置くときは、逆に隠さないと二重に読まれます。

<span>
  <Spinner aria-hidden="true" />
  読み込み中
</span>

aria-label / aria-labelledby / aria-hidden のどれか1つが必ず要ります。

色は継承します

スピナーの色は文字の色をそのまま使います。 塗りの上でも凹んだ面の上でも、 置いた場所の前景に従うので書き直す必要がありません。

大きさは行の高さに合わせてあります

文字やアイコンと横に並べたときに揃います。段は1つだけです。