Spinner

システムが処理中であり、完了時間が確定していないことを示すインジケーター。Thinca 固有のアニメーション付き SVG(360 セグメント / 4.25 秒 1 サイクルの拡縮 + フェード)を public/spinner.svg として配布し、img タグで表示する。色とサイズ(70px)は SVG ファイル内で固定。

プレビュー

配布ファイル

アニメーションは SVG 内の SMIL で完結しています。プロジェクトの public/ などに配置し、img タグで参照してください。

仕様

構造

SVG 本体: public/spinner.svg(360 セグメント + SMIL アニメーション内蔵)
primitive: src/components/ui/spinner.tsx。img タグで SVG を表示するだけのラッパー
Thinca ラッパー: src/components/Spinner.tsx。label / className の API を提供(size プロップは残しているが、原則 default の 70px を使う)
色: SVG ファイル内に直接記述(コード側からは変更しない)

アニメーション

SVG 内の animateTransform(scale)と animate(opacity)で表現。4.25 秒で 1 サイクル
イージング: t² の二乗カーブ + 線形 width taper(末端ほど細く透明、先端ほど太く不透明)
CSS の animation は使わない(SVG ファイル単体で完結)

アクセシビリティ

role="status" + aria-label(default「読み込み中」)を付与

利用基準

使うべき時

カード内・画面全体のブロック領域に表示してユーザー操作を止める
AI 要約・分析など完了時間が見積もれない処理の待機
Skeleton では表現しづらい、レイアウト未確定の処理

使わない時

ボタン内のローディング表現には使わない → Button の「処理中」状態 (disabled + ラベル進行形) を使う
ラベル横に小さく並べる用途には使わない → 文言を進行形にして表現する
画面全体の初期ロード → Skeleton Loader を使用 (レイアウトを先取りできる)
数分以上かかる処理 → 進捗率 (プログレスバー) やバックグラウンド化を検討
エラーや完了の通知 → Toast を使用

Figma

Figma 側の旧 Spinner デザイン(8 ドットの順次フェード表現)と、過渡期の Material 風 indeterminate は廃止。実装は Thinca 配布の spinner.svg(360 セグメント / 拡縮 + フェードアニメ内蔵)に統一しました。Figma 側のコンポーネントノードは別途整理予定です。