Progress Bar Animation Techniques in JavaScript

Progress Bar Animation Techniques in JavaScript

Here are different animation techniques for progress bars.

1. CSS Transition (Simplest)

.progress-bar { transition: width 0.3s ease; }

When you change bar.style.width, the CSS transition animates it. This is the simplest and most common approach.

2. requestAnimationFrame (Smooth Control)

function animateProgress(from, to, duration) {
  const start = performance.now();
  function step(now) {
    const elapsed = now - start;
    const progress = Math.min(elapsed / duration, 1);
    const value = from + (to - from) * progress;
    bar.style.width = value + "%";
    if (progress < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}
animateProgress(0, 75, 1000); // 0 to 75% in 1 second

This gives you full control over the animation curve and timing.

3. Easing Functions

function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); }

function animateWithEasing(from, to, duration) {
  const start = performance.now();
  function step(now) {
    const t = Math.min((now - start) / duration, 1);
    const eased = easeOutCubic(t);
    bar.style.width = (from + (to - from) * eased) + "%";
    if (t < 1) requestAnimationFrame(step);
  }
  requestAnimationFrame(step);
}

Easing makes the animation feel natural (fast start, slow end).

4. Striped Animation (Indeterminate)

.progress-bar.striped {
  background-image: linear-gradient(
    45deg, rgba(255,255,255,0.2) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.2) 50%,
    rgba(255,255,255,0.2) 75%, transparent 75%
  );
  background-size: 40px 40px;
  animation: stripes 1s linear infinite;
}
@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}

Striped animation shows that something is happening without a specific percentage.

5. Pulsing Animation

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.progress-bar.loading { animation: pulse 1.5s ease infinite; }

The Takeaway

Animation techniques: CSS transition (simplest, transition: width 0.3s ease), requestAnimationFrame (full control, custom curves), easing functions (natural feel), striped animation (indeterminate progress), and pulsing (loading state). Use CSS transition for most cases, requestAnimationFrame for custom control.