スピナー

Spinner

説明

非同期処理や読み込み中であることをアニメーションで示すコンポーネント。ローディング・インジケーター・プログレスとも呼ばれる。

ローディング(Loading)インジケーター(Indicator)

最もシンプルなボーダー回転型スピナー。Tailwind CSSのみで実装できる定番スタイル。

発光するように見えるグロースピナー。ダーク系UIに映えるリッチなスタイル。

3つのドットが順に拡大縮小するアニメーション。メッセージ入力中などに使われる。

円が外側に広がるパルスアニメーション。通知やアクティブ状態の表示にも使える。

複数のバーが伸び縮みするミュージックプレーヤー風のスピナー。

ドットが左から右へ順に点灯するローダー。進行方向が視覚的に分かりやすい。

Toast

画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。

Alert

エラー・警告・成功・情報など重要な状態をページ内に固定表示するコンポーネント。トーストと異なりユーザーが閉じるまで表示を維持する。

Skeleton

コンテンツ読み込み中にレイアウトの骨格をアニメーション表示するプレースホルダーコンポーネント。スピナーより体感速度が速く感じられる。

Empty State

データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。