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>

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

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

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.

Comments

[[e-mail]]

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?