Spinner

Spinner

ローディング状態を示すスピナーコンポーネントです。2 つのアニメーションタイプと 3 つのサイズをサポートします。

Props

Prop	型	デフォルト	説明
size	'sm' | 'md' | 'lg'	'md'	スピナーのサイズ
type	'default' | 'ripple'	'default'	アニメーションタイプ
label	string	'Loading'	スクリーンリーダー用のラベル

サイズ

サイズ	ピクセル
sm	16px (size-4)
md	24px (size-6)
lg	32px (size-8)

アニメーションタイプ

Default

Tailwind 標準の回転アニメーションを使用した円弧スピナーです。

• ベースの円: opacity 25%
• 回転する円弧: opacity 75%、角丸のストロークキャップ

Ripple

Schatten オリジナルの波紋アニメーションです。墨が水面に落ちた時の波紋をイメージしています。

• 中央のドット: 呼吸するように拡大・縮小（scale 0.9 ↔ 1, opacity 0.55 ↔ 1）
• 2 つの波紋: 中央から外側に拡がりながらフェードアウト（scale 0.45 → 3.2）
• アニメーション周期: 2.8s
• 2 つ目の波紋は 1.1s 遅延して開始

CSS カスタムプロパティ

プロパティ	デフォルト値	説明
--schatten-spinner-duration	2.8s	アニメーション全体の周期
--schatten-spinner-ripple-delay	1.1s	2 つ目の波紋の遅延

アクセシビリティ

• role="status" が設定されます
• label prop の内容が <span class="sr-only"> で読み上げられます

使用例

import { Spinner } from '@yasmro/schatten'

// 基本
<Spinner />

// Ripple タイプ
<Spinner type="ripple" />

// サイズ指定
<Spinner size="lg" />

// カスタムラベル
<Spinner label="読み込み中" />