Spinner

fandhe-frontend-pre-styled-ui の spinner mod が提供するスタイル済み Spinner 部品です。

読み込み中を示す回転インジケータです。role="status" + aria-label（既定 "Loading"）でスクリーンリーダーへ状態を伝えます。ボタン内部等、既に aria-busy で状態が伝わる文脈では装飾用途の spinner_decorative（role/aria-label なし）を使う設計です。トラックは既定で透明（上・右 2 辺のみ弧を描画、chakra-ui 基準）で、--fandhe-spinner-track-color / --fandhe-spinner-thickness / --fandhe-spinner-duration の custom property で線色・線幅・回転速度を上書きできます。

spinner_decorative は公開 API（イシュー #2051 で pub(crate) から公開化）で、Button 末尾配置・Badge・Empty state 等、周囲テキストが既に読み込み状態を伝える合成に使えます。また style="--fandhe-palette: currentColor" を指定すると、shadcn/ui Spinner 相当の「親の文字色へ追随する」色付けを既存 API のまま再現できます。

Demo

読み込み中表示。role="status" と aria-label でスクリーンリーダーへ状態を伝えます。トラックは既定で透明（上右 2 辺のみ弧を描画）で、OS の prefers-reduced-motion 設定時は回転を停止します。spinner_decorative（イシュー #2051 で公開化）は role/aria-label を持たない装飾用途で、Button 末尾配置・Badge 等の周囲テキストが状態を伝える合成に使えます。

Size

Palette

Syncing

Features

role="status" + aria-label（既定 "Loading"）でスクリーンリーダーへ読み込み中を伝える（crates/pre-styled-ui/src/spinner.rs）
spinner_decorative は role/aria-label を持たず aria-hidden="true" のみを付与する公開 API（Button 末尾配置・Badge・Input Group 等の合成用途、イシュー #2051 で pub(crate) から公開化、spinner.rs）
size・colorPalette の 2 軸でサイズとセマンティック色を選択する（spinner.rs 冒頭）
上・右 2 辺の弧で描画し、トラックは既定で透明（イシュー #1567、chakra-ui 基準）。--fandhe-spinner-track-color / --fandhe-spinner-thickness / --fandhe-spinner-duration の custom property で線色・線幅・回転速度を上書きできる
style="--fandhe-palette: currentColor" を指定すると shadcn/ui 相当の親文字色追随を既存 API のまま再現できる（イシュー #2051）
prefers-reduced-motion: reduce 環境では回転アニメーションを停止する（イシュー #1567）

Anatomy

root

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Md`	サイズ variant（spinner.rs）。chakra-ui 5 段基準（xs=0.75rem/sm=1rem/md=1.25rem/lg=2rem/xl=2.5rem、イシュー #1567）。
`palette`	`ColorPalette`	`Accent`	colorPalette 軸（spinner.rs、イシュー #606）。
`label`	`&str`	`"Loading"`	aria-label に渡すラベル文字列（spinner.rs）。

CSS Variables

Variable	Default
`--fandhe-spinner-duration`	`0.6s`
`--fandhe-spinner-thickness`	`2px`
`--fandhe-spinner-track-color`	`transparent`

Examples

Custom label

aria-label をカスタマイズした Spinner の例です。

In button

shadcn/ui の Button 先頭/末尾配置例に相当。先頭は ButtonProps::loading、末尾は spinner_decorative を children へ直接組み込みます。

In badge

shadcn/ui の Badge 合成例に相当。spinner_decorative をラベルテキストの前へ並べます。

SyncingUpdating

In empty state

shadcn/ui の Empty state 合成例に相当。indicator に role="status" 付きの spinner を置きます。

Processing your request

This may take a few moments.

Accessibility

WAI-ARIA

Attribute	Description
role="status" + aria-label	読み込み中であることをスクリーンリーダーへ伝える（spinner.rs）。