您好,欢迎访问一九零五行业门户网

CSS+JS打造带渐变的进度条

一个网页进度条,运行于css将进度条美化为渐变色,同进使用javascript控制css对进度条背景进行适时平铺,演示程序仅演示了进度条的样式,应用到网页还需要继续修改。
<html> <head> <title>css+js打造带渐变的进度条</title> <style> #load{width:500px;height:25px;border:1px #000 solid;} #loading{position:absolute;z-index:2;height:23;filter:progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=white,endcolorstr=#39867b);} #loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;} </style> </head> <body> <div id="load"><div id="loading"></div><div id="loadtext">1%</div></div> <script> var i=0; function test(){ i++; document.getelementbyid("loading").style.width = i + "%"; document.getelementbyid("loadtext").innertext = i + "%"; if(i<100)settimeout("test()",200); } settimeout("test()",200); </script> </body> </html>
更多css+js打造带渐变的进度条。
其它类似信息

推荐信息