用html怎么制作进度条,使用CSS3制作一个简单的进度条(demo)

这里只是一个小demo,一个用CSS3写的进度条。

如图所示：

具体代码如下：

new document

.process-bar

{

width:100px;

display:inline-block;

*zoom:1;

}

.pb-wrapper

{

border:1px solid #cfd0d2;

position:relative;

background:#cfd0d2;

border-radius: 8px;

}

.pb-container

{

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;

color:black;

font:10px/12px arial

}

50%

以上所述是小编给大家介绍的使用CSS3制作一个简单的进度条(demo)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！