loading
/
loading2.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>loading2</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
	<style>
.loading2 {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 500;
}

.content2 {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    /* background:red; */
    margin: auto;
    text-align: center;
    line-height: 80px;
}

.content2 span {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 10px;
    top: 10px;
    /* background: yellow; */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    z-index: -1;
    box-shadow: 0 5px 0 #ccc;
    animation: rotate .7s infinite;
    -webkit-animation: rotate .7s infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
@-webkit-keyframes rotate {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
	</style>
</head>

<body>
    <div class="loading2">
        <div class="content2">
            <span></span>
            <b>0%</b>
        </div>
    </div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536512497057&di=7ab791fdb1f4dc8a6e80fa7251ffd878&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0129cd591a632da801216a3edcd0ba.jpg%403000w_1l_2o_100sh.jpg"
        alt="">
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=3fc6826d58a974e65b9c58c1cb91db2d&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Flive%2F1483601927981%2F1483601927981.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=5d427911712dedc8ef4f280e953f1dc9&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F05%2Fc0%2F12232738_1341469414792.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=d417ba8486b79621b4467c58f75a66e6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F58b4e91aad9ff.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=468c157ff3857a6b135f1771a1108fef&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F5902ad1206929.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=02719fe331bd9059045ae62f1a8fc765&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5992a21a0b876.jpg"
            alt="">
    </section>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536512497057&di=7ab791fdb1f4dc8a6e80fa7251ffd878&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0129cd591a632da801216a3edcd0ba.jpg%403000w_1l_2o_100sh.jpg"
        alt="">
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=3fc6826d58a974e65b9c58c1cb91db2d&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Flive%2F1483601927981%2F1483601927981.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=5d427911712dedc8ef4f280e953f1dc9&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F05%2Fc0%2F12232738_1341469414792.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=d417ba8486b79621b4467c58f75a66e6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F58b4e91aad9ff.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=468c157ff3857a6b135f1771a1108fef&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F5902ad1206929.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=02719fe331bd9059045ae62f1a8fc765&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5992a21a0b876.jpg"
            alt="">
    </section>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536512497057&di=7ab791fdb1f4dc8a6e80fa7251ffd878&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0129cd591a632da801216a3edcd0ba.jpg%403000w_1l_2o_100sh.jpg"
        alt="">
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=3fc6826d58a974e65b9c58c1cb91db2d&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Flive%2F1483601927981%2F1483601927981.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=5d427911712dedc8ef4f280e953f1dc9&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F05%2Fc0%2F12232738_1341469414792.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=d417ba8486b79621b4467c58f75a66e6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F58b4e91aad9ff.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=468c157ff3857a6b135f1771a1108fef&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F5902ad1206929.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=02719fe331bd9059045ae62f1a8fc765&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5992a21a0b876.jpg"
            alt="">
    </section>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536512497057&di=7ab791fdb1f4dc8a6e80fa7251ffd878&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0129cd591a632da801216a3edcd0ba.jpg%403000w_1l_2o_100sh.jpg"
        alt="">
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=3fc6826d58a974e65b9c58c1cb91db2d&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Flive%2F1483601927981%2F1483601927981.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=5d427911712dedc8ef4f280e953f1dc9&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F05%2Fc0%2F12232738_1341469414792.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=d417ba8486b79621b4467c58f75a66e6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F58b4e91aad9ff.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=468c157ff3857a6b135f1771a1108fef&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F5902ad1206929.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=02719fe331bd9059045ae62f1a8fc765&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5992a21a0b876.jpg"
            alt="">
    </section>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536512497057&di=7ab791fdb1f4dc8a6e80fa7251ffd878&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0129cd591a632da801216a3edcd0ba.jpg%403000w_1l_2o_100sh.jpg"
        alt="">
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=3fc6826d58a974e65b9c58c1cb91db2d&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Flive%2F1483601927981%2F1483601927981.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=5d427911712dedc8ef4f280e953f1dc9&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F05%2Fc0%2F12232738_1341469414792.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=d417ba8486b79621b4467c58f75a66e6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F58b4e91aad9ff.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=468c157ff3857a6b135f1771a1108fef&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F5902ad1206929.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=02719fe331bd9059045ae62f1a8fc765&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5992a21a0b876.jpg"
            alt="">
    </section>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536512497057&di=7ab791fdb1f4dc8a6e80fa7251ffd878&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0129cd591a632da801216a3edcd0ba.jpg%403000w_1l_2o_100sh.jpg"
        alt="">
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=3fc6826d58a974e65b9c58c1cb91db2d&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Flive%2F1483601927981%2F1483601927981.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=5d427911712dedc8ef4f280e953f1dc9&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F05%2Fc0%2F12232738_1341469414792.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=d417ba8486b79621b4467c58f75a66e6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F58b4e91aad9ff.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=468c157ff3857a6b135f1771a1108fef&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F5902ad1206929.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=02719fe331bd9059045ae62f1a8fc765&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5992a21a0b876.jpg"
            alt="">
    </section>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536512497057&di=7ab791fdb1f4dc8a6e80fa7251ffd878&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0129cd591a632da801216a3edcd0ba.jpg%403000w_1l_2o_100sh.jpg"
        alt="">
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=3fc6826d58a974e65b9c58c1cb91db2d&imgtype=0&src=http%3A%2F%2Fimgs.aixifan.com%2Flive%2F1483601927981%2F1483601927981.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=5d427911712dedc8ef4f280e953f1dc9&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1207%2F05%2Fc0%2F12232738_1341469414792.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=d417ba8486b79621b4467c58f75a66e6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F7%2F58b4e91aad9ff.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=468c157ff3857a6b135f1771a1108fef&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fe%2F5902ad1206929.jpg"
            alt="">
    </section>
    <section>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536514586439&di=02719fe331bd9059045ae62f1a8fc765&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F5992a21a0b876.jpg"
            alt="">
    </section>
    <script>
        $(function () {
            var num = 0;
            var size = $('img').length;
            console.log(size)
            $('img').each((index, element) => {
                var img = new Image();
                img.onload = function () {
                    num++
                    var process =parseInt( num / size )* 100 + '%';
                    $('b').html(process);
                    if (num >= index) {
                        $(".loading2").fadeOut();
                    }
                }
                img.src = $('img')[index].src;
            });
        })
    </script>
</body>

</html>