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)

Answer 2

http://jsfiddle.net/cwZSW/1406/

#progress {      background: #333;      border-radius: 13px;      height: 20px;      width: 300px;      padding: 3px;  }    #progress:after {      content: '';      display: block;      background: orange;      width: 50%;      height: 100%;      border-radius: 9px;  }

<div id="progress"></div>