プログレスバーアニメーションイージング

プログレスバーのイージング戦略

プログレスバーはローディング状態を伝え、イージングの選択がユーザーの速度と信頼性の知覚に直接影響します。

確定的プログレス（既知のパーセンテージ）

実際のパーセンテージがわかるプログレスバーの場合：

.progress-fill {
  width: 0%;
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

Material Standardカーブを使用します。各幅の更新はスムーズで応答性があるべきです。各ステップの終了時の減速により、各増分が「落ち着いた」感覚を与えます。

不確定プログレス（ローディングスピナースタイル）

連続ループする不確定プログレスバーの場合：

.progress-indeterminate {
  animation: indeterminate 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes indeterminate {
  0% { left: -30%; width: 30%; }
  50% { left: 50%; width: 30%; }
  100% { left: 100%; width: 30%; }
}

カーブcubic-bezier(0.65, 0, 0.35, 1)は中央で加速し両端で減速するモーションを作り、ユーザーがアクティブな処理と関連付けるパターンを生み出します。

なぜlinearではないのか？

完全なlinearプログレスバーは緩慢で機械的に感じられることがあります。確定的プログレスでも、増分間のわずかなイージングがインターフェースをより洗練されたものにします。ただし、確定的バーに誇張されたイージングは使用しないでください — 実際の進捗についてユーザーを誤解させる可能性があります。

知覚速度のトリック

.progress-fill {
  transition: width 300ms cubic-bezier(0.1, 0.7, 0.1, 1);
}

このカーブはバーを素早く前進させ、その後各増分をゆっくり完了させます。研究によると、早い段階で速く進み後半で遅くなるプログレスバーは、合計時間が同じでもユーザーにとってより速く感じられます。