纯css制作的漂亮好看的进度条

发布时间：2010-05-31 23:29:19 作者：佚名

纯css做漂亮好看的进度条，看了绝对不后悔。

效果
50%
兼容
IE6/7/8
Chrome 4
Firefox 3.5 等等
更多效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title> new document </title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"   /><style>.process-bar{width:100px;display:inline-block;*zoom:1;}.pb-wrapper{border:1px solid gray;border-style:solid none;position:relative;background:#cfd0d2;}.pb-container{border:1px solid gray;border-style:none solid;height:12px;position:relative;left:-1px;margin-right:-2px;font:1px/0 arial;padding:1px;}.pb-highlight{position:absolute;left:0;top:0;_top:1px;width:100%;opacity:0.6;filter:alpha(opacity=60);height:6px;background:white;font-size:1px;line-height:0;z-index:1}.pb-text{width:100%;position:absolute;left:0;top:0;text-align:center;font:10px/12px arial;}.pb-value{height:100%;width:50%;background:#19d73d;}.pb-text{color:black;font:10px/12px arial}/* -- 以下是重写的皮肤 -- *//* green */.skin-green .pb-wrapper{border-color:#666;border-top-color:#628c2d;}.skin-green .pb-container{border-color:#666;border-left-color:#628c2d;}.skin-green .pb-text{ color:black }/* blue */.skin-blue .pb-wrapper{border-color:#0e7c78;border-top-color:#41beb9;}.skin-blue .pb-container{border-color:#0e7c78;border-left-color:#41beb9;}.skin-blue .pb-text{color:white}.skin-blue .pb-value{background:#159b96;}/* red */.skin-red .pb-wrapper{border-color:#8e1411;border-top-color:#cb3d3a;}.skin-red .pb-container{border-color:#8e1411;border-left-color:#cb3d3a;}.skin-red .pb-text{color:#470200;}.skin-red .pb-value{background:#d70500}/* orange */.skin-orange .pb-wrapper,.skin-orange .pb-container{border-color:#d55110;}.skin-orange .pb-text{color:#250f00;}.skin-orange .pb-value{background:#d75a00;}/* purple */.skin-purple .pb-wrapper,.skin-purple .pb-container{border-color:#a90561;}.skin-purple .pb-text{color:#720040;}.skin-purple .pb-value{background:#9d118e}/* black */.skin-black .pb-wrapper,.skin-black .pb-container{border-color:black}.skin-black .pb-text{color:gray;}.skin-black .pb-value{background:#111111;}/* 分割线样式 */.hua-li-de-fen-ge-xian{border-bottom:2px dashed #eee;height:1px;font-size:1px;margin:5px 0}</style></head><body>     <div class="process-bar skin-green">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">10%</div>     <div class="pb-value"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-blue">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">100%</div>     <div class="pb-value" style="width:100%"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-red">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">18%</div>     <div class="pb-value" style="width:18%"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-orange">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">55%</div>     <div class="pb-value" style="width:55%"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-purple">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">32%</div>     <div class="pb-value" style="width:32%"></div>     </div>     </div>     </div>     <div class="hua-li-de-fen-ge-xian"></div>     <div class="process-bar skin-black">     <div class="pb-wrapper">     <div class="pb-highlight"></div>     <div class="pb-container">     <div class="pb-text">78%</div>     <div class="pb-value" style="width:78%"></div>     </div>     </div>     </div></body></html>

提示：您可以先修改部分代码再运行

综合例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> .process-bar { width:100px; display:inline-block; *zoom:1; } .pb-wrapper { border:1px solid gray; border-style:solid none; position:relative; background:#cfd0d2; } .pb-container { border:1px solid gray; border-style:none solid; height:12px; position:relative; left:-1px; margin-right:-2px; font:1px/0 arial; padding:1px; } .pb-highlight { position:absolute; left:0; top:0; _top:1px; width:100%; opacity:0.6; filter:alpha(opacity=60); height:6px; background:white; font-size:1px; line-height:0; z-index:1 } .pb-text { width:100%; position:absolute; left:0; top:0; text-align:center; font:10px/12px arial; } .pb-value { height:100%; width:50%; background:#19d73d; } .pb-text { color:black; } .grid { border-collapse : collapse ; font:12px/1.5 arial; background:white; border:1px solid gray; width:500px; } .grid td, .grid th { padding:5px } .grid th { background:#eee; color:black; text-align:left; font-weight:normal } </style> </head> <body> <table cellpadding="0" cellspacing="0" border="1" class="grid" rules="rows" frame="void"> <tr> <th> 项目ID </th> <th> 项目名称 </th> <th> 开始时间 </th> <th> 项目进度 </th> </tr> <tr> <td> #200912110001 </td> <td> 项目管理系统 </td> <td> 2010-12-01 </td> <td> <div class="process-bar"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">99%</div> <div class="pb-value" style="width:99%"></div> </div> </div> </div> </td> </tr> <tr> <td> #2009654001 </td> <td> ERP </td> <td> 2010-12-01 </td> <td> <div class="process-bar"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">10%</div> <div class="pb-value" style="width:10%"></div> </div> </div> </div> </td> </tr> <tr> <td> #200916540001 </td> <td> OA </td> <td> 2010-12-01 </td> <td> <div class="process-bar"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">89%</div> <div class="pb-value" style="width:89%"></div> </div> </div> </div> </td> </tr> <tr> <td> #20091214501 </td> <td> 河蟹养殖系统 </td> <td> 2010-12-01 </td> <td> <div class="process-bar"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">54%</div> <div class="pb-value" style="width:54%"></div> </div> </div> </div> </td> </tr> <tr> <td> #200912110001 </td> <td> 项目管理系统 </td> <td> 2010-12-01 </td> <td> <div class="process-bar"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">99%</div> <div class="pb-value" style="width:99%"></div> </div> </div> </div> </td> </tr> <tr> <td> #2009654001 </td> <td> ERP </td> <td> 2010-12-01 </td> <td> <div class="process-bar"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">10%</div> <div class="pb-value" style="width:10%"></div> </div> </div> </div> </td> </tr> <tr> <td> #200916540001 </td> <td> OA </td> <td> 2010-12-01 </td> <td> <div class="process-bar"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">89%</div> <div class="pb-value" style="width:89%"></div> </div> </div> </div> </td> </tr> <tr> <td> #20091214501 </td> <td> 河蟹养殖系统 </td> <td> 2010-12-01 </td> <td> <div class="process-bar"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">54%</div> <div class="pb-value" style="width:54%"></div> </div> </div> </div> </td> </tr> </table> </body> </html>

提示：您可以先修改部分代码再运行

睡觉去喽~

Tag：css 进度条

css 实现圆形渐变进度条效果的示例代码
这篇文章主要介绍了css 实现圆形渐变进度条效果的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-24
利用css3实现进度条效果及动态添加百分比
这篇文章主要介绍了利用css3实现进度条效果及动态添加百分比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来
2020-06-01
css 横向进度条和竖向进度条实现代码
这篇文章主要介绍了css 横向进度条和竖向进度条实现代码,有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用css实现
2020-04-14
使用CSS3实现环形进度条效果
这篇文章主要介绍了使用CSS3实现环形进度条效果,需要的朋友可以参考下
2018-06-01
css 进度条的文字根据进度渐变的示例代码
这篇文章主要介绍了css 进度条的文字根据进度渐变的示例代码，介绍了进度条里面的文字需要根据进度的长度而变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一
2018-01-09
手把手教你用CSS实现带箭头的流程进度条
这篇文章主要给大家介绍了利用CSS实现带箭头的流程进度条大方法，文中给出了详细的示例代码，对大家具有一定的参考价值，有需要的朋友们一起来看看吧。
2017-01-22
CSS实现进度条和订单进度条
这篇文章主要为大家详细介绍了CSS进度条和订单进度条的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-07-12
CSS 进度条实现代码
[html] <style> #graphbox{ border:1px solid #e7e7e7; padding:10px; width:250px; background-color:#f8f8f8; margin:5px 0; } #graphbox h2{ color:#66
2009-03-30
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
这篇文章主要介绍了仅仅使用 HTML/CSS 实现各类进度条的方式汇总,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-11-08