Progress bars are everywhere — from showing how much of a file has downloaded, to highlighting your skills on a portfolio site. But not all progress bars are created equal. With a little CSS magic, you can take a plain block of colour and turn it into something eye-catching, dynamic, and stylish.
In this tutorial, we’ll walk through how to build a striped progress bar that animates — no frameworks, no libraries, just pure HTML and CSS. By the end, you’ll have a reusable component that looks modern and professional.
Step 1. Set up the structure
Every progress bar needs two parts:
- A track (the background).
- A fill (the part that grows to show progress).
Here’s the bare-bones HTML:
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
That inline style="width: 75%" is just setting how full the bar is. Later, you could change that with JavaScript or different classes if you wanted more flexibility.Step 2. Style the base bar
Let’s give the progress track a subtle background and rounded corners:
.progress {
width: 100%;
height: 30px;
background-color: #e9ecef; /* light grey track */
border-radius: 8px;
overflow: hidden;
}
Now for the fill:
.progress-bar {
height: 100%;
background-color: #0d6efd; /* Bootstrap primary blue */
transition: width 0.6s ease; /* smooth fill animation */
}
At this point, you’ve got a functional progress bar — but it still looks pretty basic.
Step 3: Add stripes for extra flair
A flat colour can feel a bit boring. Let’s add some diagonal stripes using CSS gradients:
.progress-bar {
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.3) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.3) 75%,
transparent 75%,
transparent
);
background-size: 40px 40px; /* controls stripe size */
}
Now your progress bar has that familiar “striped” look you often see in dashboards or installers.
Step 4: Bring the stripes to life
The real magic happens when you animate the stripes. To do this, we’ll shift the background position over time:
@keyframes moveStripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
.progress-bar {
animation: moveStripes 2s linear infinite;
}
This gives your progress bar a continuous flowing effect, making it feel more interactive and alive.
Step 5: Customise to your style
Want a green success bar instead of blue? Just change the base colour:
.progress-bar.success {
background-color: #198754; /* Bootstrap success green */
}
Want thinner stripes? Adjust the background-size.
Want more contrast? Increase the white overlay’s opacity.
You’ve got full control.
Full example
Here’s everything put together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Progress Bar</title>
<style>
.progress {
width: 100%;
max-width: 500px;
height: 30px;
background-color: #e9ecef;
border-radius: 8px;
overflow: hidden;
}
.progress-bar {
width: 75%; /* progress percentage */
height: 100%;
background-color: #0d6efd;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.3) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.3) 75%,
transparent 75%,
transparent
);
background-size: 40px 40px;
animation: moveStripes 2s linear infinite;
}
@keyframes moveStripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
</style>
</head>
<body>
<h2>Animated Striped Progress Bar</h2>
<div class="progress">
<div class="progress-bar"></div>
</div>
</body>
</html>
Wrapping up
And there you have it — a fully animated, striped progress bar built entirely with HTML and CSS. It’s simple, customisable, and can be reused wherever you need to show progress.
Once you’ve got the basics down, try experimenting:
Make the fill grow from 0% to 100% with keyframes.
Change the colours dynamically for different states.
Stack multiple progress bars for a dashboard effect.
CSS gives you all the tools to turn a boring static bar into something engaging and polished.
