DEV Community

Cover image for CSS Progress Bars!
Mohammed Farmaan.
Mohammed Farmaan.

Posted on • Updated on

CSS Progress Bars!

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>
Enter fullscreen mode Exit fullscreen mode

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);
}

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
scrabill profile image
Shannon Crabill

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?

Collapse
 
maxart2501 profile image
Massimo Artizzu

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.

Collapse
 
zxcodes profile image
Mohammed Farmaan.

Yeah maybe.

Collapse
 
dinsmoredesign profile image
Derek D

You could also add ARIA attributes to tell screen readers that it's a progress bar 👍

developer.mozilla.org/en-US/docs/W...

Thread Thread
 
zxcodes profile image
Mohammed Farmaan.

Thanks for the source. I'll learn more about it and try to implement.😇

Collapse
 
maxart2501 profile image
Massimo Artizzu

Nice effect there. With some role and aria-* 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.

Collapse
 
zxcodes profile image
Mohammed Farmaan.

I'm still a beginner so I don't know those attributes much. I'll definitely look in to that.😇

Collapse
 
maxart2501 profile image
Massimo Artizzu

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.