CSS 進度條

 <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;">&nbsp;30%</div>
  <div style="position:absolute;width:30%;height:100%;overflow:hidden;background-color:#369;">
   <span style="position:absolute;text-align:center;color:white;">&nbsp;</span>
  </div>
</div>