页面加载动画实现-优快云博客

本文链接：https://blog.youkuaiyun.com/mastermanager/article/details/2191637

<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>
<STYLE type=text/css>
#loader_container {
LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 40%; TEXT-ALIGN: center; /*居中显示*/
}
#loader {
BORDER-RIGHT: #5a667b 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #5a667b 1px solid; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 11px; Z-INDEX: 2; PADDING-BOTTOM: 16px; MARGIN: 0px auto; BORDER-LEFT: #5a667b 1px solid; WIDTH: 130px; COLOR: #000000; PADDING-TOP: 10px; BORDER-BOTTOM: #5a667b 1px solid; FONT-FAMILY: Tahoma, Helvetica, sans; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left
}
#progress {
FONT-SIZE: 1px; LEFT: 0px; WIDTH: 1px; POSITION: relative; TOP: 1px; HEIGHT: 5px; BACKGROUND-COLOR: #8894a8
}
#loader_bg {
FONT-SIZE: 1px; LEFT: 8px; WIDTH: 113px; POSITION: relative; TOP: 8px; HEIGHT: 7px; BACKGROUND-COLOR: #e4e7eb
}
</STYLE>
<BODY οnlοad=remove_loading();>

<DIV id=loader_container>
<DIV id=loader>
<DIV align=center>页面正在加载中 ...</DIV>
<DIV id=loader_bg>
<DIV id=progress>
</DIV>
</DIV>
</DIV>
</DIV>

<img src="http://www.arting365.com/upload/imgold/155/2005-03/7168e7d33b2f8b6f884f514584c8c15f.jpg">
</BODY>
</HTML>