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

最新推荐文章于 2024-05-17 03:22:47 发布

御行所

最新推荐文章于 2024-05-17 03:22:47 发布

阅读量5.8k

点赞数 2

分类专栏： JavaScript 文章标签： loading javascript

本文链接：https://blog.csdn.net/u012698249/article/details/78064333

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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