网页进度条，JS网站加载中Loading效果代码

发布时间：2018-08-17 01:15:22 所属栏目：Unix 来源：站长网

导读：记得去年4月份的时候发表过一篇《点击按钮后，显示带百分比的进度条加载效果》，这篇文章发表以后，有一位站长朋友前来咨询烈火网，如何实现不点击按钮，打开网页直接显示加载的进度条。因为当时工作比较忙就把这件事忘记了，现在对这位站长朋友说声抱歉，

　　记得去年4月份的时候发表过一篇《点击按钮后，显示带百分比的进度条加载效果》，这篇文章发表以后，有一位站长朋友前来咨询烈火网，如何实现不点击按钮，打开网页直接显示加载的进度条。因为当时工作比较忙就把这件事忘记了，现在对这位站长朋友说声抱歉，并补上一款带百分比、加载中、Loading的进度条加载效果。

　　顺便说一下，如果您的网站已经引入jQuery，为了避免脚本冲突，可以使用另一款效果：jQuery弹出带透明遮罩层的loading状态的代码

　　本文演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>进度条</title> <style type="text/css"> body{margin:0px;padding:0px;} #veryhuobox{line-height:20px;width:300px;height:20px;background:#ccc;text-align:left;margin:100px auto 0 auto;} #veryhuoLoading{color:#fff;font-size:12px;line-height:20px;width:0px;height:20px;background:red;text-align:center;position: absolute;} </style> <script type="text/javascript"> window.onload=function(){ var idiv=document.getElementById('veryhuoLoading'); var veryhuobox=document.getElementById('veryhuobox'); var timer=null; timer=setInterval(function(){ var iWidth=idiv.offsetWidth/veryhuobox.offsetWidth*100; idiv.style.width=idiv.offsetWidth+1+'px'; idiv.innerHTML=Math.round(iWidth)+"%"; if(iWidth==100){ clearInterval(timer); } },1); } </script> </head> <body> <div id="veryhuobox"> <div id="veryhuoLoading"></div> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：广州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!