Spinner
サイズと意味のある色の軸を持ち、通知される不確定な進行状況です。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
uiSize | md, lg | md |
variant | current, muted, primary, danger | current |
label | アクセス可能なステータステキスト | Loading |
decorative | true, false | false |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/spinner.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRSpinner } from '@tinyrack/ui/components/spinner';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
サイズ パーマリンク
周囲のテキストやコントロールにスピナーのサイズを合わせてください。
カラーバリアント パーマリンク
周囲の文字色を継承する場合は `current`、強調を抑える場合は `muted`、進行中の作業には `primary`、失敗した作業には `danger` を使用してください。
単独 status または control の装飾 パーマリンク
単独の TRSpinner が status を担当します。名前付き TRButton は loading 状態を持ち、内部の spinner を隠します。reduced motion では回転を止めます。
タスク lifecycle パーマリンク
task を start、finish、reset し、作業中だけ通知された status が存在することを確認します。
API
TRSpinner は既定で role="status" を公開するため、空でないタスク固有の label を使います。空の label は Loading にフォールバックします。すでに名前のある loading control や status region 内では decorative を設定し、1 つの element だけを通知します。作業中だけ spinner を mount し、必要に応じて更新対象の region に aria-busy="true" を設定して、その region から完了を通知します。ユーザーが reduced motion を要求すると回転は停止します。
| CSS token | 既定値 | 用途 |
|---|---|---|
--tr-spinner-size | size recipe | Indicator diameter |
--tr-spinner-stroke-width | --tinyrack-spinner-stroke-width | Ring thickness |
--tr-spinner-color | semantic variant color | Active and track color |
--tinyrack-spinner-size-md | foundation metric | Small diameter |
--tinyrack-spinner-size-md | foundation metric | Medium diameter |
--tinyrack-spinner-size-lg | foundation metric | Large diameter |
--tinyrack-spinner-track-opacity | foundation metric | Inactive ring opacity |