网页中的loading代码

最新推荐文章于 2023-04-28 11:46:11 发布

Mobidogs

最新推荐文章于 2023-04-28 11:46:11 发布

阅读量1.4k

点赞数

分类专栏： .Net 文章标签： function div javascript iframe border html

本文链接：https://blog.csdn.net/Mobidogs/article/details/1646501

版权

.Net 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

#loader {
font-family:Tahoma, Helvetica, sans;
font-size:11.5px;
color:#000000;
background-color:#FFFFFF;
padding:10px 0 16px 0;
margin:0 auto;
display:block;
width:130px;
border:1px solid #5a667b;
text-align:left;
z-index:2;
}
#loader_bg {background-color:#e4e7eb;
position:relative;
top:8px;
left:8px;
height:7px;
width:113px;
font-size:1px}
#progress {
height:5px;
font-size:1px;
width:1px;
position:relative;
top:1px;
left:0px;
background-color:#70940D
}
</style><script language="JavaScript">
//读取框
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate()
{
var elem = document.getElementById('progress');
if(elem != null) {
if (pos==0) len += dir;
if (len>32 || pos>79) pos += dir;
if (pos>79) len -= dir;
if (pos>79 && len==0) pos=0;
elem.style.left = pos;
elem.style.width = len;
}
}
function remove_loading() {
this.clearInterval(t_id);
var targelem = document.getElementById('loader_container');
targelem.style.display='none';
targelem.style.visibility='hidden';
}

</script>
<html>
<head>
<title>qqq</title>
</head>
<body onLoad="remove_loading();">
<div id="loader_container">
<div id="loader">
<div align="center">Loading ...</div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>
<iframe src='http://blog.csdn.net/mobidogs' height=100% width=100%></iframe>
</body>
</html>