7onicDESIGN 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
<Spinner color="default" />
<Spinner color="primary" />
<Spinner color="current" />

Speed

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

slow
default
fast
<Spinner speed="slow" />
<Spinner speed="default" />
<Spinner speed="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クラス

Anatomy

Ring
1
2
Dots
1
2
3
Bars
1
2
3
4
Orbit (Default: Dual Ring)
1
2
1
Track
背景リング
2
Indicator
アクティブ部分
D
Dots
順次フェード
O
Orbit
3D回転

Best Practices

✓

推奨

  • ✓不確定な待機時間にはSpinnerを使用する
  • ✓ボタン内部にはsize="sm"とcolor="current"を使う
  • ✓テキスト横のインラインにはdotsバリアントが適切
✕

避けるべき

  • ✕進捗率が分かる場合はSpinnerを使わない — Progressを使用する
  • ✕1ページに大量のSpinnerを同時表示しない
  • ✕ユーザーの操作完了後のフィードバックにSpinnerを使わない — Toastを使用する

Accessibility

ARIA / WCAG

  • role="status" 自動付与
  • aria-label="Loading" デフォルト
  • label propでカスタムラベル
  • スクリーンリーダー対応済み