一个好看的js加载loading的div样式

来源：互联网发布：权志龙ins视频软件编辑：程序博客网时间：2024/05/04 12:35

html

<div id="loader_container" style="visibility: hidden;">            <div id="loader">                <div align="center">页面正在加载中。。。</div>                <div id="loader_bg">                    <div id="progress"></div>                </div>            </div>        </div>

js和css

<script type="text/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 romoveLoadMsg() {            this.clearInterval(t_id);            var targelem = document.getElementById("loader_container");            targelem.style.display = 'none';            targelem.style.visibility = 'hidden';        }    </script><style>                    #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;}    </style>

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

阅读全文

0 0