mcpField
L
loading-states

loading-states

github.com/dylantarreデザイン・UI134572 回インストール43 週間前に更新
リポジトリ

loading-states について

Disneyの12のアニメーション原則を使い、システムの動作を伝えるローディング表示を設計するスキルです。インジケーターやスケルトン、コンテンツ表示への移行について、タイミングと実装の指針を示します。

主な機能

  1. 0112の原則をローディング表示に適用
  2. 02種類別のタイミング目安
  3. 03スピナー、プログレスバー、スケルトンに対応
  4. 04ローディングからコンテンツへの移行を案内
  5. 05動きを減らす場合は静的表示を推奨

活用シーン

  1. 01ローディング表示を出すタイミングの選定
  2. 02コンテンツのレイアウトに合うスケルトン設計
  3. 03表示終了後の急な切り替わりの回避

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dylantarre/animation-principles --skill loading-states

インストール後、Claude Code で/loading-statesを入力して読み込まれたか確認します。

詳細

ローディング状態のアニメーション

ディズニーの12の原則を適用して、システムの動作状況を伝えます。

原則の適用

スクワッシュ＆ストレッチ：進行状況インジケーターを脈動させたり、呼吸するように動かしたりして、動きを表現できます。わずかなスケール変化（0.98～1.02）を加えます。

予備動作：アクションの実行時に、すぐにローディング状態を表示します。スピナーを表示するために、遅い応答を待たないでください。

演出：ローディングインジケーターは、コンテンツが表示される場所に配置します。スケルトン画面は最終的なレイアウトに合わせます。

ストレート・アヘッドとポーズ・トゥ・ポーズ：ローディングを一連の流れとして設計します。即時のインジケーター → 進行状況 → 完了 → コンテンツ。

フォロースルーとオーバーラッピング：コンテンツの表示に合わせてローディングをフェードアウトします。100ms重ねて遷移させます。

スローイン・スローアウト：既知のパーセンテージ間で、進行状況バーをイーズイン・イーズアウトさせます。不確定状態では、滑らかに揺らします。

アーク：円形スピナーは正確な円の軌道に沿って動かします。ぎくしゃくした回転は避けてください。

副次的な動作：スケルトンのシマーに、控えめな脈動を加えます。複数の合図によって「ローディング中」であることを伝えます。

タイミング：

  • スピナーは200ms後に表示します（読み込みが速いときのちらつきを防ぎます）
  • 最小表示時間：500ms（不快なちらつきを防ぎます）
  • スケルトンのシマーの周期：1500～2000ms

誇張：控えめにします。ローディングは注意をそらすのではなく、安心感を与えるものです。

立体感のある描画：スケルトンはコンテンツの比率に合わせます。形が違うと、錯覚が崩れます。

魅力：ローディングは退屈ではなく、前向きに感じられるようにします。滑らかな動きは進行している印象を与えます。

タイミングの推奨事項

ローディングの種類表示までの遅延最小表示時間アニメーション周期
スピナー200ms500ms700～800ms
進行状況バー0ms-滑らかな塗りつぶし
スケルトン0ms500ms1500msのシマー
ボタンのスピナー0ms400ms600ms
全ページ100ms800ms1000ms

実装パターン

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    #e0e0e0 0%,
    #f0f0f0 50%,
    #e0e0e0 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1500ms ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Spinner with smooth rotation */
.spinner {
  animation: spin 700ms linear infinite;
  opacity: 0;
  animation: fade-in 200ms 200ms ease-out forwards, spin 700ms linear infinite;
}

/* Progress bar with easing */
.progress-fill {
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

ローディングからコンテンツへの遷移

.content-enter {
  animation: content-reveal 300ms ease-out forwards;
}

@keyframes content-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

主なルール

  1. ちらつきを防ぐため、スピナーの表示を200ms遅らせます
  2. ローディングを表示したら、最低500msは表示し続けます
  3. スケルトンの形状は、実際のコンテンツの寸法に合わせます
  4. ローディングからコンテンツへ滑らかに遷移させます。決して急に切り替えないでください
  5. prefers-reduced-motionを尊重し、代わりに静的なインジケーターを表示します

コメント

Markdown 対応