Styling Progress Bar for All Browsers

Basic usage of the new HTML5 progress bar is as follows. The ratio of max to value is current progress value out of 100% and visibly equivalent to the green bar you see on screen.

   <progress value="5" max="10" /> 
   

Let’s say following is the default style in three major browsers say Firefox, IE and Chrome:

progress {
}

In your application you would like to have a consistent styling for progress-bar across all platforms. However, this is highly dependent on OS and Web Browsers. Let’s now focus on fixing some of them by setting the border and height. Did you notice, the moment you put border property colors are changed and 3D effects are gone.

progress {
   height: 15px;
   border: 0px;
}


progress-bar-styling

Still they are not alike and colors are highly broken. Can we use background-color and color? Trying these properties, fixes things for IE but Firefox and Chrome does not obey at all. Here is the output. It seems that Firefox obeyed background.

progress {
	height: 15px;
	border: 0px none;
	background-color: grey;
	color: red;
}


progress-bar-broken-color

Firefox has special class -moz-progress-bar to control styling of the progress value. On the other hand -webkit-progress-bar used on Chrom/Safari for entire bar. Use -webkit-progress-value to control background of the value in Chrome and Safari.

Here is final styles you should use for a consistent progress bar:

progress {
	height: 15px;
	border: 0px none;
	background-color: grey;
	color: red;
}

progress::-webkit-progress-bar {  
	background-color: grey;
}  
progress::-webkit-progress-value {  
	background-color: red;
}  

progress::-moz-progress-bar {  
	background-color: red;
}  

And here is the final output:


Progress bar color fixed

Note: If your progress-bar has ID and do not want to change all progress-bars your can define above browser-specific styles as follows:

#myProgress::-moz-progress-bar {  
	background-color: red;
}  

Animation

When the value of progress bar changes, IE show animated change. Chrome and Firefox change the bar value discretely. You can use CSS3 animation as below to get animation working in Chrome.

progress::-webkit-progress-value {  
	background-color: red;
	-webkit-transition: 0.5s ease-out;
}  

Happy Coding !!

2 thoughts on “Styling Progress Bar for All Browsers

Leave a Reply

Your email address will not be published. Required fields are marked *