进度条（一）

xiaojinging

于 2018-09-10 15:12:45 发布

阅读量137

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaojinging/article/details/82589719

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里仅作为学习记录，毕竟年龄大了记性不好~

1、这里是定时器进度条：

HTML代码：

<div class="loading">
        <div class="pic"></div>
</div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414436&di=c5bbeee3bdc659ae2050f2d3825e6162&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F58ab9fe75f357.jpg">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414431&di=cba77152deeaabd6a6608be473868f3d&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F58797c1671855.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414431&di=002fb85a1bfd249ab15bab9625f1f45b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F58a2c3ea3d8bc.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414431&di=0bae00ae7b519b1a6ed6118e3fc88876&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F3%2F586db441b1847.jpg" alt="">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536399414431&di=d5c8d6d253d0522d515e9afd3e6920d3&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fb%2F587596e18d61e.jpg" alt="">

CSS代码:

<style>
        .loading {
            width:100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: #ffffff;
            z-index:100;
        }

        .loading .pic {
            background: url("img/loading.gif") no-repeat;
            width: 64px;
            height: 64px;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom: 0;
            margin:auto;
        }
</style>

JS代码：

<script>
        $(function(){
//            var loading = '<div class="loading"><div class="pic"></div> </div>';
//            $("body").append(loading);这里注释是可直接以js的方式将HTML结构输入到body当中

            setInterval(function(){
                $(".loading").fadeOut();//fadeOut();淡出方法
            },3000);
        });
</script>

这种方式仅作为练习用，它本质上是个假进度条，因为它完全没有做到加载完成显示内容，而只是我们人为的给个延迟时间，等待它加载。不推荐使用。