DEV Community

Ayrton Fidelis
Ayrton Fidelis

Posted on

2 2

A useful progress-bar fallback to IE9. CSS-only.

Progress bars are tricky elements to be styled.

Yes, it's completely possible to make them look nice cross-browser with only CSS as this CSS-TRICKS post shows us. But making them look nice is not the point of this article.

The point of this article is making them useful for browsers that don't understand the progress element by themselves, and can't render that visible progress bar.

And it's simple.

Let's take a look at a basic progress markup:

<progress min="0" max="100" value="15"></progress>
Enter fullscreen mode Exit fullscreen mode

To a browser that don't understand what progress means, it's just a HTMLUnknownElement with the properties min="0" max="100" value="15". What can we do with that?

  • Use :before and :after to inject the text 15/100 inside it:
/* make it look like a box */
progress {
  border: 1px solid black;
  line-height: 30px;
}  

/* make pseudo-elements 50% side-by-side */
progress:before, progress:after {
  display: inline-block;
  width: 50%;
}

/* put the value and a slash on the left half, aligned to the right */
progress:before {
  content: attr(value) '/';
  text-align: right;
}

/* put the max value on the right half */
progress:after {
  content: attr(max);
}
Enter fullscreen mode Exit fullscreen mode
  • If we're sure that our progress elements will have a maximum of 100, we can show it with the % instead:
/* make it look like a box */
progress {
  border: 1px solid black;
  line-height: 30px;
}

/* put the value and the percent sign in the middle of the pseudo-element */
progress:before {
  content: attr(value) '%';
  display: block;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Here's a simple demo of the two situations working (with div instead of progress):

Here's this concept applied to that nice fully-styled progress-bar from that CSS-TRICKS post.

The Fastest, Most Accurate API for Voice AI

Ad Image

Building an AI Agent that needs to deliver human-like conversations? | Speechmatics’ real-time ASR is available in 50 languages and can understand speech in a fraction of a second.

Try Free

Top comments (1)

Collapse
 
naveenrawat51 profile image
naveenrawat51@gmail.com

progress:before {
content: attr(value) '/';
text-align: right;
}

/* put the max value on the right half */
progress:after {
content: attr(max);
}

not working with IE. any solution?

Sentry workshop image

Flaky tests got you down?

Learn how to merge your code without having to hit “rerun” every 5 minutes 😮‍💨

Save your spot now.

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay