html给某个div加上loading,一个好看的js加载loading的div样式

html

页面正在加载中。。。

js和css

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 romoveLoadMsg() {

this.clearInterval(t_id);

var targelem = document.getElementById("loader_container");

targelem.style.display = 'none';

targelem.style.visibility = 'hidden';

}

#loader_container {text-align:center; position:absolute; top:40%; width:100%; left: 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:9999;}

#progress {height:5px; font-size:1px; width:1px; position:relative; top:1px; left:0px; background-color:#8894a8;}

#loader_bg {background-color:#e4e7eb; position:relative; top:8px; left:8px; height:7px; width:113px; font-size:1px;}

参考http://www.jb51.net/article/21031.htm

本文由【waitig】发表在等英博客 本文固定链接：一个好看的js加载loading的div样式 欢迎关注本站官方公众号，每日都有干货分享！

点赞 (0)赏分享 (0)