How to make a progress bar

Question

How would one go about making a progress bar in html/css/javascript. I don\'t really want to use Flash. Something along the lines of what can be found here: http://dustincur

Answer 1

I know the following doesn't work currently because browsers do not support it yet, but maybe some day this will help:

At the time of this post attr() on other properties than content is just a Candidate Recommendation¹. As soon as it is implemented, one could create a progress bar with just one element (like the HTML 5 , but with better styling options and text inside)

and pure CSS

.bar {
    position: relative;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #003458;
    color: white;
}

.bar:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: attr(data-value %, 0); /* currently not supported */
    content: '';
    background: rgba(255, 255, 255, 0.3);
}

.bar:after {
    content: attr(data-value) "%";
}

Here is the currently not working demo.

---

¹ Cannot imagine why this isn't implemented in any browser. First I'd think that if you have the functionality for content already, it should not be too hard to extend that (but of course I don't really know to be honest). Second: The above is just one good example showing how powerful this functionality could be. Hopefully they start to support it soon, or it won't even be part of the final specification.