CSS3实现页面加载进度条 - HelloWorld开发者社区

什么情况下会使用到页面加载进度条？

当页面中的需要加载的内容很多，用户直接进入则看不到任何内容，体验不好，这个时候就需要使用到页面加载的一个动画，在页面加载结束后再

显示主体内容。

实现页面加载进度条有哪几种方式？

一般可分为两种，

1.设置多少时间后显示页面，

2.根据页面加载的文档状态来实现

如何根据文档状态来实现？

document.onreadystatechange  页面加载状态改变时的事件

document.readyState  返回当前文档状态

1.uninitialized 还未开始加载

2.loading   载入中

3.interactive  已加载，文档与用户可以开始交互

4.complete  载入完成

<script>
    document.onreadystatechange = function(){
        if (document.readyState === 'complete') {
            alert('页面加载完成')
        }
    }
</script>

在页面加载完成后去掉加载动画即可。

加载的小动画如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        .loading{
            position: fixed;
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            z-index: 100;
            background:#fff;
        }
        .loading .pic{
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .loading .pic i{
            display: block;
            float: left;
            width: 6px;
            height: 50px;
            background: #399;
            margin: 0 2px;
            -webkit-transform: scaleY(0.4);
            -ms-transform: scaleY(0.4);
            transform: scaleY(0.4);
            -webkit-animation: load 1.2s infinite;
            animation: load 1.2s infinite;
        }
        .loading .pic i:nth-of-type(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}
        .loading .pic i:nth-of-type(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}
        .loading .pic i:nth-of-type(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}
        .loading .pic i:nth-of-type(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}
        @-webkit-keyframes load {
            0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
            20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
        }
        @keyframes load {
            0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
            20%{-webkit-transform: scaleY(1);transform: scaleY(1);}
        }

    </style>
</head>
<body>
<div class="loading">
    <div class="pic">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
</div>

</body>
</html>

友情提示：CSS3需要写一些兼容的语法，这里有个网址，直接将CSS代码粘贴过去就可以获得所有兼容的写法 http://autoprefixer.github.io/