5 Ways to Animate Progress Bars with CSS

Progress bars don’t have to be boring. With nothing more than HTML and CSS, you can transform them into sleek, interactive elements that make your site feel alive. This mini-series will walk you through five different animation styles — from the classic striped barber-pole effect to more playful pulse and colour transitions.

Part 1: Striped & Flowing Progress Bar

(already covered in the main tutorial above)

• Uses a CSS gradient for stripes.
• Animates with background-position to create movement.
• Perfect for a polished, professional look.

[Full tutorial here → Animated Striped Progress Bars with CSS]

Part 2: Smooth Filling Animation

Instead of jumping straight to a set width, the bar can grow smoothly from 0% to its target.

@keyframes fillBar {
  from { width: 0; }
  to   { width: 75%; }
}

.progress-bar {
  animation: fillBar 2s ease forwards;
}

This makes the bar look like it’s actively “loading in”, which is great for dashboards or skill meters.

Part 3: Colour-Shifting Progress Bar

Why stick with one colour? You can animate the background colour to transition through multiple states:

@keyframes colourShift {
  0%   { background-color: #0d6efd; }  /* blue */
  50%  { background-color: #ffc107; }  /* yellow */
  100% { background-color: #198754; }  /* green */
}

.progress-bar {
  animation: colourShift 4s linear infinite alternate;
}

This creates a lively bar that cycles through different hues.

Part 4: Pulsing Progress Bar

Want to draw attention to the progress? Add a pulse effect:

@keyframes pulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.1); }
}

.progress-bar {
  animation: pulse 1.5s ease-in-out infinite;
  transform-origin: center;
}

The bar gently expands and contracts, making it feel more dynamic.

Part 5: Gradient Sweep Progress Bar

For a modern look, you can animate a gradient that sweeps across the bar:

.progress-bar {
  background: linear-gradient(90deg, #0d6efd, #6610f2, #6f42c1);
  background-size: 200% 100%;
  animation: sweep 3s linear infinite;
}

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

The result is a glowing, futuristic progress bar that feels like it’s constantly moving forward.

Wrapping Up

By combining just a few CSS properties — width, background, transform, and animation — you can create a surprising variety of progress bar animations.

Here’s the series recap:

1. Striped & Flowing (classic barber-pole look).
2. Smooth Filling (width grows from 0 to target).
3. Colour Shifting (cycles through colours).
4. Pulsing (expands and contracts).
5. Gradient Sweep (dynamic glowing effect).

Experiment with these patterns, mix and match them, and before long your progress bars will feel as polished as anything in Bootstrap or Material UI — but built entirely by you.