スピナーSpinnerExperimental
処理中であることを示すインジケーターです。
プレビュー
状態とバリエーション
サイズ
ボタン内、インライン、単独ローダーで使い分けます。
ボタン内の処理中
送信や保存中はボタンを無効化し、表示ラベルと一緒に出します。
領域全体の読み込み
操作を待たせる場合は、状態文と一緒に role=status の領域で伝えます。
データを読み込んでいます。
テキスト横の状態表示
小さい更新状態は、スピナーだけにせず短い状態文を添えます。
最新状態に更新しています。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| size | 'default' | 'sm' | 'lg' | 'icon' | 'default' | スピナーの大きさです。ボタン内では sm、単独表示では default または lg を使います。 |
| className | string | - | SVG に追加するクラスです。 |
使い方
import { Spinner } from "@gunjo/ui"
export function LoadingSpinner() {
return <Spinner size="lg" aria-label="読み込み中" />
}設計の判断
- 資料の核である「200ms待ってから出す」は部品に入れていません。資料は「200ms以内に終わる処理でスピナーを即座に出すと、一瞬光って画面が落ち着かない」を核に挙げています。GUNJO の
Spinnerは渡されたら回るだけの絵で、遅らせる判断は呼ぶ側に残しました。待つべきかどうかは「その処理がどれくらいで終わるか」で決まり、絵の側からは分からないためです。 - 大きさは生成された3つと、それ以外の1つ。
sm（12px）とdefault（16px）とlg（24px）は設計の元データから生成されたSpinnerVariantKeyです。加えてiconを渡すと40pxになります。資料の目安（ボタンの中は12から16px、区画の中は24から32px、ページ全体は48px以上）に照らすと、GUNJO の刻みは区画までで、ページ全体を覆う大きさはclassNameで足すことになります。 - 色を決めずに、周りの薄い色を継ぐ。既定は
text-muted-foregroundです。資料は「文脈の主色を使う」と書いていますが、GUNJO は主色を持たせず、置いた場所に馴染む薄い色から始めます。回っている絵は動きだけで十分に目を引くので、色でさらに引く必要がないためです。目立たせたい場面だけclassNameで上書きします。
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。