KARAKURIDESIGN SYSTEM

Spinner

Spinnerは、不確定なローディング状態を視覚的に表示するコンポーネントです。 4つのバリアント（Ring、Dots、Bars、Orbit）を提供し、データ取得やページ遷移など完了時点が不明な非同期処理の待機表示に使用します。

4
Variants
3
Sizes
3
Colors
Pure
React

Playground

Preview
ringdefaultdefault
Variant
Size
Color
Speed
<Spinner />

Variants

Ring
回転リング — 最も標準的なローディング表現
Default
Dots
3つのドットが順番にフェードするパルスアニメーション
Inline
Bars
4本のバーが波打つスケールアニメーション
Processing
Orbit
Y軸3D回転 — 5種のサブスタイル（Ring・Dots・Cube・Flip・Morph）
3D

Sizes

sm
Ring16px
Orbit22px
default
Ring24px
Orbit32px
lg
Ring32px
Orbit44px

Features

Color

3つのカラーオプション。currentは親要素のテキスト色を継承し、ボタン内部などで自然に馴染みます。

default
primary
current

Speed

アニメーション速度を3段階で調整できます。

slow
default
fast

3D Orbit Styles

5つの3Dオービットスタイルを比較できます。

Ring
Dots
Cube
Flip
Morph
Ring (lg, primary)
Dots (lg, primary)
Cube (lg, primary)
Flip (lg, primary)
Morph (lg, primary)

API

Component Structure

Spinner— Pure React

スタンドアロンコンポーネント。サブコンポーネントはありません。

Props

variant"ring"
"ring" | "dots" | "bars" | "orbit"

スピナーの視覚バリアント

orbitStyle"ring"
"ring" | "dots" | "cube" | "flip" | "morph"

Orbit サブスタイル（variant="orbit" 時のみ）

size"default"
"sm" | "default" | "lg"

サイズ

color"default"
"default" | "primary" | "current"

色（default: ダーク、primary: ブランド、current: 親のテキスト色を継承）

speed"default"
"slow" | "default" | "fast"

アニメーション速度

label"Loading"
string

アクセシビリティラベル（aria-label）

classNameundefined
string

追加のCSSクラス