<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打造带渐变的进度条相关文章请关注PHP中文网!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论