<style type="text/css">
/* progress bar container */
#progressbar{
border:1px solid black;
width:200px;
height:20px;
position:relative;
color:black;
}
/* color bar */
#progressbar div.progress{
position:absolute;
width:0;
height:100%;
overflow:hidden;
background-color:#369;
}
/* text on bar */
#progressbar div.progress .text{
position:absolute;
text-align:center;
color:white;
}
/* text off bar */
#progressbar div.text{
position:absolute;
width:100%;
height:100%;
text-align:center;
}
</style>
<div style="border:1px solid black; width:200px;height:20px; position:relative; color:black; ">
<div style="position:absolute;width:100%;height:100%;text-align:center;"> 30%</div>
<div style="position:absolute;width:30%;height:100%;overflow:hidden;background-color:#369;">
<span style="position:absolute;text-align:center;color:white;"> </span>
</div>
</div>