页面加载时显示进度条的js

加载器样式与JS实现

最新推荐文章于 2023-04-01 22:49:01 发布

weixin_30830327

最新推荐文章于 2023-04-01 22:49:01 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Jaylong/archive/2011/04/18/load.html

本文介绍了一种网页加载器的样式设计与实现方法，包括CSS样式定义及必要的JavaScript交互，用于显示页面加载进度。

<style type="text/css">
/*Loader Start----------------------------------------------*/
#loader_container { text-align:center;position:absolute;top:400px;width:100%;margin-left:auto; margin-right:auto;overflow:hidden; }
#loader { font-family:Tahoma, Helvetica, sans;font-size:11.5px;color:#abc;background-color:#f2f2f2;padding:10px 0 16px 0;margin:0 auto;display:block;width:130px;border: #dae2e7 1px solid;text-align:left;z-index:2; }
#loader_bg { background-color: #abc;position:relative;top:8px;left:8px;height:7px;width:113px;font-size:1px }
#progress { height:5px;font-size:1px;width:1px;position:relative;top:1px;left:0px;background-color: #fff; }
/*Loader End ----------------------------------------------*/
</style>

 <!---- loading start !---->
        <div id="loader_container" onclick="this.style.display='none'" title="点击关闭">
            <div id="loader">
                <div align="center">
                    正在载入中 ...</div>
                <div id="loader_bg">
                    <div id="progress">
                    </div>
                </div>
            </div>
        </div>
<!---- loading End !---->

注意：还要引入loader.js文件，提供下载如下