Using CSS to achieve a simple progress bar

Percent progress bar for CSS implementations

Effect Chart:

<style>
#graphbox {
border:1px solid #e7e7e7;
padding:10px
width:250px;
Background-color : #f8f8f8;
margin:5px 0;
}
#graphbox h2{
Color: #666666;
font-family:arial;
font-size:18px;
font-weight:700;
}
. graph{
position:relative
Background-color: #F0EFEF;
border:1px solid #cccccc;
padding:2px;
font-size:13px;
font-weight:700;
}
. Graph. Orange,. Green,. Blue,. Red,. black{
Position:relative;
text-align:left;
Color: #ffffff; br> height:18px;
line-height:18px;
Font-family:arial;
Display:block;
}
. Graph. Orange{background-color: #ff6600;
. Graph. Green{background-color: #66CC33;}
. Graph. Blue{background-color: #3399CC;}
. Graph. red{background-color:red;}
. Graph. Black{background-color: #555;}
</style>
<div id= "Graphbox"
   <div class= "graph" ><span class= "Orange" style= "Width:35%; " >orange:35%</span></div>
 <div class= "graph" ><span class= "green" style= "width:90%" ;" >green:90%</span></div>
 <div class= "graph" ><span class= "Blue" style= "width:75%"; >blue:75%</span></div>
 <div class= "graph" ><span class= "Red" style= "width:85%"; >red:85%</span></div>
 <div class= "graph" ><span class= "Black" style= "width:100%"; >black:100%</span></div>
</div>