HTML5 Progress bar
HTML5 Progress bar

Today I fell in love with the HTML5 <progress> bar. With this element, I can act the progress of a task using HTML and CSS. Here is the markup:

The progress bar

The development element requires a start tag and an end tag, which means it can incorporate fallback content. What you see central the progress element will only be read when <progress> isn’t supported. In this example, I’ve built a retreat progress bar using CSS, so both possible conclusion look the same.

The progress element has two attributes:

  • max indicates the finished value
  • value indicates the current value of the development bar. If this value continue then the progress bar is studied to be determinate, otherwise it’s studied indeterminate.

To make the advance bar more accessible, I have addicted it a text label. So, if the bar cannot be seen by usable technology, the text above it define the value just fine. Therefore, the content inside <progress> is not surly necessary; it’s just for offering. That’s why I’ve added aria role=”presentation” to the div called ‘Progress-bar’. This tells usable technology to forget it.


First of all, I kind the progress element. It has few kind like height, width and limit, all of which react as expected. However, background-color acts oddly to me. It doesn’t actually change the colour of all, but it seems to generate a canvas for setting colours via all the vendor pseudo elements. Essentially, the background-color use to be there to grant pseudo elements to style it, but the colour value doesn’t come to get read—the value could be anything. Interesting.

This is where the fun begins (or ends) because different browsers desire different sets of pseudo aspect to style the development bar

 See more:


Fresh Web Design Tools You’ll Find Useful