CSS: visually consistent html5 progress bar in all browsers

Today a few words about HTML5 progress bar, and more specifically about adding CSS rules to such an element, so it will be looking same in all the browsers. For example there may be a requirement at design level, to keep visually consistent html5 progress bars. The developer may be surprised about the default behavior of this element.

The same appearance of html5 progress bar in all browsers

Different web browsers displays html5 progress bar in a different way. Also the default styles are not same. If we want to get progress bar looking always the same, we need a small CSS trick. A ready solution below.

Let’s only assume we have HTML document with progress element:

bono sin deposito

<div class="progress-bar-wrap">
  <progress id="progressbar" value="33" max="100"></progress>
</div>

And the colors of our project, e.g.:

– background: #cccccc

– front: #0066ff

The main CSS would be looking like this:

progress {
  width: 50%;
  background: #cccccc;
  color: #0066ff;
  padding: 0px;
  border: none;
  border-radius: 33px;
}

However, some additional styles needed, for webkit and mozilla. Please pay attention to the details:

progress::-webkit-progress-bar {
  background: #cccccc;
  border-radius: 33px;
  -webkit-border-radius: 33px;
}

progress::-webkit-progress-value {
  background: #0066ff;
  border-radius: 33px;
  -webkit-border-radius: 33px;
}

progress::-moz-progress-bar {
  background: #0066ff;
  border-radius: 33px;
  -moz-border-radius: 33px;
}

Thanks to this simple manipulation, the styles (in this case colors and border radius parameters) are looking the same in all browsers, without strange differences. Tested in: FF, Chrome, Opera, IE.

A simple demo available here.

CSS tips and tricks

ProBars — jQuery animated progress bars plugin

Animated circular progress bars with jQuery

Bootstrap and jQuery bar charts — jchart plugin

Summary

If someone didn’t work too much with html5 progress bar, can be startled that set colors and other styles works only in a specific web browser. To reach the same appearance in all the browsers, we need to define those details in a separate CSS rules. Fortunately, there is nothing complicated.

Have fun with HTML5 and CSS!