Progress Bar with HTML and CSS

Question

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

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 1

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

<div id="progressbar">
  <div></div>
</div>

Fiddle

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