For a number of reasons, HTML's standard progress bars are just not usable. They look ugly on different browsers and you'll always have to look at the alternative ones such as Bootstrap which is good but when we're building something from the scratch and do not wanna include any frameworks, it won't be the option anymore.
That's where you'll realize that CSS is much more than just coloring and positioning things. You can have some amazing looking progress bars with in a few minutes. As a beginner, I always try doing everything without any frameworks and this is no exception. I've created these progress bars without putting much effort, and they're responsive too. Below is the demonstration:
Here's the markup for it:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Progress Bars</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>CSS Progress Bars</h1>
<div class="bar-holder">
<div class="bar-1">20%</div>
</div>
<div class="bar-holder">
<div class="bar-2">40%</div>
</div>
<div class="bar-holder">
<div class="bar-3">60%</div>
</div>
<div class="bar-holder">
<div class="bar-4">80%</div>
</div>
<div class="bar-holder">
<div class="bar-5">100%</div>
</div>
</body>
</html>
Here's the magic:
h1 {
text-align: center;
margin-top: 30vh;
font-size: 2.3em;
}
/* INDIVIDUAL BAR HOLDER */
.bar-holder {
width: 60%;
background-color: rgb(231, 231, 231);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
margin: 0 auto;
}
/* INDIVIDUAL BAR'S STYLING, SAME GOES WITH OTHER BARS */
.bar-2 {
width: 20%;
background-color: rgb(22, 21, 21);
color: #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
text-align: center;
margin-top: 15px;
font-weight: 400;
}
/* HERE'S ONE WITH GRADIENT WHICH LOOKS SUPER COOL */
.bar-5 {
width: 100%;
color: #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
text-align: center;
margin-top: 20px;
font-weight: 400;
background-image: linear-gradient(100deg, rgb(38, 0, 255), red, yellow);
}
I've used % unit for them to be responsive, so you can use other units according to your preference. Thanks for reading. Hope you like these.
Top comments (8)
I agree that these look better than the standard HTML progress bar, it's not semantic (and possibly accessible) and is missing the functional aspect (updating the progress bar).
Would you be able to rework your CSS to work with a semantic HTML progress bar?
For the most part, it's feasible.
What's not it's writing the percentage in the middle. It's only possible with a pseudo-element in Blink-based browsers.
Yeah maybe.
You could also add ARIA attributes to tell screen readers that it's a progress bar 👍
developer.mozilla.org/en-US/docs/W...
Thanks for the source. I'll learn more about it and try to implement.😇
Nice effect there. With some
roleandaria-*attributes, they could also become accessible.On a side note, in CSS I suggest to put the declaration without the vendor prefix after the ones with it, as it's meant to be the standardized version of the property.
I'm still a beginner so I don't know those attributes much. I'll definitely look in to that.😇
That's great!
Admittedly, it's not always easy to know where to begin with accessibility. There's a scary lot to learn and that could be overwhelming, but bit by bit you'll get the hang of it.