loaders-spinners

ローダーとスピナーのアニメーション原則

ディズニーの12の原則をローディングインジケーターに適用し、待ち時間を楽しく、情報が伝わる体験にしましょう。

ローダーへの原則の適用

1. スクワッシュ＆ストレッチ

バウンスするドット型ローダーは、着地時に押しつぶされ、上昇時に伸びるようにします。生き生きとした、遊び心のある動きになります。

2. アンティシペーション

進行状況が完了する前に、プログレスバーを一時停止させたり、速度を落としたりできます。スピナーは停止前に減速できます。まもなく完了することを知らせます。

3. ステージング

ローダーははっきりと見えるようにしつつ、必要以上にコンテンツを遮らないようにします。スケルトンスクリーンは、実際のコンテンツが表示される位置を示します。

4. ストレート・アヘッドとポーズ・トゥ・ポーズ

バウンスするドットのような有機的なローダーには、ストレート・アヘッドが適しています。プログレスバーには、ポーズ・トゥ・ポーズ（0%から100%までのキーフレーム）を使います。

5. フォロースルーとオーバーラッピングアクション

複数のパーツで構成されるローダーでは、各要素のタイミングをずらします。1つ目のドットがバウンドし、100ms後に2つ目が続きます。リズムが生まれます。

6. イーズインとイーズアウト

回転には、回転サイクルごとにease-in-outを使うか、連続回転にはlinearを使います。バウンスには、上昇時にease-in、下降時にease-outを使います。

7. アーク

軌道を描くローダーは、正確な円弧に沿って動かします。バウンドする要素には、実際の物理法則のような放物線状の軌道を使います。

8. セカンダリーアクション

スピナーが回転する（プライマリーアクション）間に、グローを点滅させます（セカンダリーアクション）。スケルトンシマーは、スケルトンの形状に対するセカンダリーアクションです。

9. タイミング

• スピナーの1回転：800-1200ms
• バウンスのサイクル：500-800ms
• スケルトンシマー：1500-2500ms
• プログレスバーの滑らかな更新：200ms
• ドットの時間差：100-150ms
• パルス：1000-2000ms

10. 誇張

遊び心のあるブランドでは、弾力のある、バウンスするローダーを使えます。プロフェッショナルな場面では、控えめで滑らかなスピナーが必要です。ブランドの雰囲気に合わせましょう。

11. 立体感のある描画

ストローク幅を一定に保ちます。円形のパスは正確な円にします。プログレスバーは均等に塗りつぶします。

12. 魅力

魅力的なローダーは、体感の待ち時間を短くします。単調なスピナーは、待ち時間を長く感じさせます。楽しいローダーは、いらだちを束の間の喜びに変えられます。

CSS の実装

.spinner {
  animation: spin 1000ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.bounce-dot {
  animation: bounce 600ms ease-in-out infinite alternate;
}

.bounce-dot:nth-child(2) { animation-delay: 100ms; }
.bounce-dot:nth-child(3) { animation-delay: 200ms; }

@keyframes bounce {
  from { transform: translateY(0) scaleY(1); }
  to { transform: translateY(-20px) scaleY(0.9); }
}

.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 2000ms infinite;
}

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

主なプロパティ

• transform：rotate、translateY、scale
• animation：無限ループ
• background-position：シマー効果
• stroke-dashoffset：SVG スピナー
• opacity：点滅効果