Novi UI
コンポーネント一覧

Spinner

1秒以内に終わる処理には出さない。ちらついて逆に遅く感じる。

デモ

使い分け

こうする

  • 1 秒以内に終わらない処理に出す
  • ボタンの中で待つなら Button の isLoading を使う

こうしない

  • 画面全体を Spinner で覆わない。何が待たされているかが分からなくなる

Props

Spinner の props 一覧
名前型説明
size'sm' | 'md' | 'lg'
color'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
labelReactNode視覚的に表示するか、支援技術向けにのみ読ませるラベル
classNamesClassNames<typeof spinnerSlots>

Slot

構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。

  • root必須
  • circle必須
  • label

アクセシビリティ

  • `role="status"` で読み込み中を伝える。図形は `aria-hidden` で、`label` が読み上げ文になる
  • キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
  • 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
  • prefers-reduced-motion が有効なときはアニメーションを行いません。