html进度条代码示例如下：

！DOCTYPEHTML

htmllang='en '

头

titlehtml静态进度条/标题示例

metharset=' UTF-8 '

styletype='text/css '。mask{

position:absolute值；

left:0px

top:0px

高度：；

宽度：；

背景色： # eee；

}。out{

margin:auto

利润率-更高：20%；

text-align : center；

height:30px

宽度width:500px

背景-color : # fff；

border:1pxsolid # 000

位置：相对；

}。在{

position:absolute值；

left:0px

top:0px

height:30px

宽度width:250px

背景-color : # DDD；

}。num{

position:absolute值；

left:0px

top:0px

height:30px

行高：30 px；

宽度width:500px

text-align : center；

位置：相对；

}

/style

/head

身体

divclass='mask '

divclass='out '

divclass='in'/div

divclass='num'50%/div

/div

/div

/body

/html

上述代码在网页上的显示效果如下图：所示

6a58af981f97d86b66a6cef6aa8a6e8.png

如图所示，页面有一个静态进度条，显示50%的进度。因为是html静态进度条，所以也可以改变html进度条的速度，也就是改变数量，只要改变相应的样式即可。其实这里的原理是把一个div分成两部分，一部分是黑色部分代表进度量，一部分是空白部分代表剩余量。然后主要设置进度部分的样式，也就是颜色宽度。

本文转载自中文网站