Search
Learn
Share

Make html5 progress bar element looking the same in all browsers

Published by Profile Image DirectCode on 14 November, 2016
91 views
CSS for preparing visually consistent html5 progress bar in all the browsers!

Different web browsers displays html5 progress bar in a different way, also the defaults are different. If we want progress bars based on HTML5 looking the same in all the browsers, according to the design, we need a simple CSS trick.

Sample element:

<progress id="progressbar" value="33" max="100"></progress>

Now it's time for CSS:

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

But this is only a main CSS rules set. For the purpose of this topic, we need something more:

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

And now we all are set...

Find out more here.

Thank you!