How to create progress bar animation css

CssHow-ToBeginner · 3 min read

How to Create Progress Bar Animation with CSS

To create a progress bar animation in CSS, use a container with a background and an inner bar that changes width over time using @keyframes and animation properties. Animate the inner bar's width from 0% to 100% to show progress visually.

📐

Syntax

A progress bar animation uses a container element and an inner bar element. The inner bar's width is animated using CSS @keyframes and the animation property.

@keyframes: Defines the animation steps.
animation-name: The name of the keyframes to use.
animation-duration: How long the animation runs.
animation-fill-mode: Keeps the final state after animation ends.
width: Changes from 0% to 100% to show progress.

css

/* Container for the progress bar */
.progress-container {
  width: 100%;
  background-color: #eee;
  border-radius: 0.5rem;
  overflow: hidden;
  height: 1.5rem;
}

/* Inner bar that animates */
.progress-bar {
  height: 100%;
  background-color: #4caf50;
  width: 0%; /* start at 0% width */
  animation-name: progressAnimation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

/* Keyframes to animate width from 0% to 100% */
@keyframes progressAnimation {
  from { width: 0%; }
  to { width: 100%; }
}

💻

Example

This example shows a simple progress bar that smoothly fills from left to right over 3 seconds using CSS animation.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Progress Bar Animation</title>
<style>
  .progress-container {
    width: 300px;
    background-color: #eee;
    border-radius: 0.5rem;
    overflow: hidden;
    height: 1.5rem;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  }
  .progress-bar {
    height: 100%;
    background-color: #4caf50;
    width: 0%;
    animation-name: progressAnimation;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
  }
  @keyframes progressAnimation {
    from { width: 0%; }
    to { width: 100%; }
  }
</style>
</head>
<body>
  <section aria-label="Progress bar example">
    <div class="progress-container" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
      <div class="progress-bar"></div>
    </div>
  </section>
</body>
</html>

Output

A horizontal gray bar 300px wide with a green bar inside that smoothly grows from left to right over 3 seconds until it fills the entire container.

⚠️

Common Pitfalls

Common mistakes when creating CSS progress bar animations include:

Not setting animation-fill-mode: forwards; so the bar resets after animation ends.
Forgetting to set the initial width: 0% on the animated bar.
Using fixed pixel widths instead of percentages, which breaks responsiveness.
Not adding overflow: hidden; on the container, causing the bar to overflow visually.
Missing accessibility attributes like role="progressbar" and aria-valuenow.

Example of a wrong and right way:

css

/* Wrong: No fill mode, bar resets after animation */
.progress-bar {
  width: 0%;
  animation-name: progressAnimation;
  animation-duration: 3s;
  /* missing animation-fill-mode */
}

/* Right: Keeps final width after animation */
.progress-bar {
  width: 0%;
  animation-name: progressAnimation;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

📊

Quick Reference

Remember these key points for CSS progress bar animations:

Use a container with fixed width and background color.
Animate the inner bar's width from 0% to 100% using @keyframes.
Set animation-fill-mode: forwards; to keep the bar filled after animation.
Use percentages for width to keep it responsive.
Add ARIA roles and properties for accessibility.

✅

Key Takeaways

Animate the inner bar's width from 0% to 100% using CSS keyframes for smooth progress.

Always use animation-fill-mode: forwards to keep the progress bar filled after animation.

Use a container with overflow: hidden and border-radius for a clean look.

Set ARIA roles and properties for accessible progress bars.

Use percentage widths to ensure the progress bar is responsive on different screen sizes.