Progress Bar Animation Easing

Progress Bar Easing Strategies

Progress bars communicate loading state, and the choice of easing directly affects the user's perception of speed and reliability.

Determinate Progress (Known Percentage)

For progress bars where you know the actual percentage:

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

Use the Material Standard curve. Each width update should feel smooth and responsive. The deceleration at the end of each step makes each increment feel like it has "settled."

Indeterminate Progress (Loading Spinner Style)

For indeterminate progress bars that loop continuously:

.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%; }
}

The curve cubic-bezier(0.65, 0, 0.35, 1) creates a motion that accelerates in the middle and decelerates at both ends. This makes the bar appear to "rush" through the center and "pause" briefly at the edges — a pattern users associate with active processing.

Why Not linear?

A perfectly linear progress bar can feel sluggish and mechanical. Even for determinate progress, a slight easing between increments makes the interface feel more polished. However, do not use exaggerated easing on determinate bars — it can mislead users about actual progress.

Perceived Speed Trick

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

This curve makes the bar jump forward quickly and then gradually complete each increment. Research shows that progress bars with fast early progress and slow late progress feel faster to users, even when the total duration is the same.