一、横向进度条
<html><head><title>横向进度条</title><style type="text/css"> .loadbar{width:200px;height:25px;background-color:#fff;border:1px solid #ccc; }.bar{line-height:25px; height:100%;display:block; font-family:arial;font-size:12px;background-color:#bb9319; color:#fff;}</style></head><body> <div class="loadbar"><strong class="bar" style='width:30%;'>30%</strong></div></body></html>
效果如下：
二、竖向进度条
<html><head><title>竖向进度条</title><style type="text/css"> .loadbar{width:25px;height:200px;background-color:#fff;border:1px solid #ccc;position:relative; }.bar{width:100%;display:block; font-family:arial;font-size:12px; background-color:#bb9319;color:#fff; position:absolute;bottom:0; }</style></head><body> <div class="loadbar"><strong class="bar" style='height:30%;'>30%</strong></div></body></html>
效果如下：
