html载入进度条,html页面加载进度条

程序代码

#loader_container {

filter:alpha(opacity=70);

// 进度条透明度

text-align:center;

position:absolute;

top:50%;

width:100%;

left: 0;

}

#loader {

font-family:Tahoma, Helvetica, sans;

font-size:11.5px;

color:#97dee1;

background-color:#FFFFFF;

padding:10px 0 16px 0;

margin:0 auto;

display:block;

width:230px;

border:1px solid #ffffff;

text-align:left;

z-index:2;

}

#loader_bg {background-color:#fdfdfd;

position:relative;

top:8px;

left:8px;

height:7px;

width:213px;

font-size:1px}

#progress {

height:5px;

font-size:1px;

width:1px;

position:relative;

top:1px;

left:0px;

background-color:#97dee1

}

//读取框

var t_id = setInterval(animate,20);

var pos=0;

var dir=2;

var len=0;

function animate()

{

var elem = document.getElementByIdx('progress');

if(elem != null) {

if (pos==0) len += dir;

if (len>32 || pos>179) pos +=

dir;

if (pos>179) len -= dir;

if (pos>179 &&

len==0) pos=0;

elem.style.left = pos;

elem.style.width = len;

}

}

function remove_loading() {

this.clearInterval(t_id);

var targelem = document.getElementByIdx('loader_container');

targelem.style.display='none';

targelem.style.visibility='hidden';

initJS();

}