Skip to content
fandhe-frontendcore v0.4.3
GitHub

Spinner

fandhe-frontend-wireframe-ui のローディングインジケータのプレースホルダーです。円弧だけを描く円形の表示で、画面設計図上で「読み込み中」の状態を示すための部品です。API は spinner(size) の 1 引数のみで、専用の props 構造体は持ちません(詳細は下の引数表を参照)。

blocks.pm に同名部品はなく、wireframe-ui 独自追加の部品です(docs/design/wireframe-ui-architecture.md §8)。参考として blocks.pm を挙げますが、ライセンス上の理由により本部品のスクリーンショットや外観の対応構成は掲載しません(詳細は同文書 §2)。

本部品は静的な表示専用のため、実際に回転するローディングインジケータとしては動作しません。実際にアクセシブルな読み込み中表示が必要な場合は Spinner(Themes) を検討してください。

Demo

Xs

Sm

Md(既定)

Lg

Xl

引数表

引数型既定値説明
sizeSizeSize::Mdサイズ段階(xs〜xl)。リング直径に反映される。

原案差分メモ

  • 独自追加部品: blocks.pm に対応する部品はなく、wireframe-ui が独自に追加する部品の 1 つです。
  • スクリーンショットは掲載しない: docs/design/wireframe-ui-architecture.md §2 のライセンス保留に従い、blocks.pm のスクリーンショット・外観の対応構成は掲載しません。
  • 静的な円弧のみでアニメーションなし: @keyframes・animation・回転は一切実装しません。イシューの「静的表示では円弧のみ」という要件と、本クレートが SSR 専用・非インタラクティブという位置づけに合わせた判断です。
  • CSS リングのみで描き SVG を使わない: icon モジュールの icon::ALL は 21 種の固定レジストリで件数テストを持つため、アイコンとして追加すると当該契約を壊します。代わりに border の上辺だけを濃色にした円で円弧を表現します。
  • role・aria-*・data-* を持たない: Spinner は表示状態軸を持たず、Active/Disabled のいずれも消費しません。
  • &str 引数を持たないため XSS 対象入力がない: size: Size 以外の引数を持たないため、既定エスケープの回帰テストが対象とする利用者入力の経路自体が存在しません(slider 部品の先例と同じ扱いです)。
  • 非インタラクティブ: 対話セマンティクス(tabindex・キーボードイベントハンドラ・フォーカス管理)は一切持ちません。