shaahin shaahin - 1 year ago 163
CSS Question

Progress Bar with HTML and CSS

I want to create a progress bar like in the below image:

Progress Bar Example

I have no idea about creating this. Should I use HTML5 techniques?

Would you please give me some help about creating this progress bar?

Answer Source
<div id="progressbar">
#progressbar {
  background-color: black;
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;

#progressbar > div {
   background-color: orange;
   width: 40%; /* Adjust with JavaScript */
   height: 20px;
   border-radius: 10px;


(EDIT: Changed Syntax highlight; changed descendant to child selector)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download