shaahin shaahin - 22 days ago 19
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
<div id="progressbar">
  <div></div>
</div>
#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;
}

Fiddle

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

Comments