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

2010-05-31 23:29:19 脚本之家

效果
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>

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

睡觉去喽~