最终效果图:

  

html结构:

<div>
    <p class="p1">
        <span></span>
    </p>
    <p class="p2">
        <span></span>
    </p>
    <p class="p3">
        <span></span>
    </p>
    <p class="p4">
        <span></span>
    </p>
</div>

css样式:

div{
    position: relative;
    width: 253px;
    height: 9px;
    margin: 100px auto;
    overflow: hidden;
}
p{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 9px;
    overflow: hidden;
}
p span{
    position: absolute;
    left: -11px;
    top:0px;
    width: 280px;
    height: 100%;
    background: linear-gradient(45deg,#1a6adf 25%,#578cdf 25%,#578cdf 50%,#1a6adf 50%,#1a6adf 75%,#578cdf 75%,#578cdf 100%);
    background-size: 28px 28px;
}
.p1{
    left: 0px;
    animation: m1 8s linear infinite;
}
.p2{
    left: -253px;
    animation: m2 8s linear infinite;
}
.p3{
    left: -506px;
    animation: m3 8s linear infinite;
}
.p4{
    left: -759px;
    animation: m4 8s linear infinite;
}
p.p2 span,p.p4 span{
    background-size: 28px 28px;
}
@keyframes m1{
    0%{
        left: 0px;
        z-index: 2;
    }
    25%{
        left: 253px;
        z-index: 1;
    }
    50%{
        left: -506px;
        z-index: 1;
    }
    75%{
        left: -253px;
        z-index: 2;
    }
    100%{
        left: 0px;
        z-index: 2;
    }
}
@keyframes m2{
    0%{
        left: -253px;
        z-index: 2;
    }
    25%{
        left: 0px;
        z-index: 2;
    }
    50%{
        left: 253px;
        z-index: 1;
    }
    75%{
        left: -506px;
        z-index: 1;
    }
    100%{
        left: -253px;
        z-index: 1;
    }
}
@keyframes m3{
    0%{
        left: -506px;
        z-index: 1;
    }
    25%{
        left: -253px;
        z-index: 2;
    }
    50%{
        left: 0px;
        z-index: 2;
    }
    75%{
        left: 253px;
        z-index: 1;
    }
    100%{
        left: -506px;
        z-index: 1;
    }
}
@keyframes m4{
    0%{
        left: -759px;
        z-index: 1;
    }
    25%{
        left: -506px;
        z-index: 1;
    }
    50%{
        left: -253px;
        z-index: 2;
    }
    75%{
        left: 0px;
        z-index: 2;
    }
    100%{
        left: 253px;
        z-index: 2;
    }
}

最初的时候实现页面加载进度条是公司的设计给的gif图,后来发现一个问题就是当我的页面样式和html都加载完成的时候图片没有加载出来,虽然只是很短的时间,但是不例如用户体验,这个也仅仅是页面初始化加载的时候会出现图片加载的问题,因此我想用css来实现那么就不会出现资源加载不统一的问题。那么我们来看一下他的实现原理:

首先我们给一个div来定义整个容器的大小,分别定义四个p来实现四个不同的条纹,在后期我们还要对每一段条纹进行截取所以每个p元素里边再嵌套一个span。我们用四个条纹实现看似一个条纹段在旋转的效果其实就是让条纹从左像右移动,既然是移动那么四个条纹的前后一定是衔接的。

这个是第一个条纹没有做限制的效果图,前后末端是没有规律可寻的,那么怎么让两条相同的条纹衔接起来看起来像是一条条纹呢,通过p和span我们对每条条纹进行截取:前端的截取到第一条深蓝纹路左上角为基准深蓝的1/2,末端截取到最后一条深蓝以右下角为基准深蓝宽度的1/2。截取后的效果如图,这样我把两个相同的条纹放在一个能够清楚的看到前后的衔接。这样四个条纹通过animation进行移动,思路类似于banner图轮转。当然菜菜一枚,有更好的方法多多交流~

css3 linear-gradient实现页面加载进度条效果的更多相关文章

  1. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  3. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  4. jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...

  5. js页面加载进度条(这个就比较正式了,改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

  6. 插件二之页面加载进度条pace.js

    关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...

  7. 自己写的页面加载进度条jquery插件

    (function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...

  8. element admin中使用nprogress实现页面加载进度条

    主要是知道是nprogress这个组件实现的就可以了,组件的使用方法可参考:https://blog.csdn.net/ltr15036900300/article/details/47321217 ...

  9. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

随机推荐

  1. 关于layoutSubviews

    layoutSubviews 是什么? 设定subviews的尺寸和位置,如果要精确布局,可以在子类里重写此方法.不能直接调用此方法,如果想强制layout刷新,调用setNeedsLayout来代替 ...

  2. memcache的内存管理探微

    slab分配器:http://blog.csdn.net/luotuo44/article/details/42737181 hash操作  :http://blog.csdn.net/luotuo4 ...

  3. Android studio安装

    1.首先上甲骨文公司的官方网站下载JDK的安装包,根据自己电脑的操作系统选择正确的版本下载.不知道下载地址的同学可以百度一下很快就能搜到.下载还的安装包如下图所示. 2.点击下载好的JDK安装程序,百 ...

  4. web项目中各种路径的获取

    以工程名为/DemoWeb为例: 访问的jsp为:http://localhost:8080/DemoWeb/test/index.jsp 1 JSP中获得当前应用的相对路径和绝对路径 (1)得到工程 ...

  5. Python实现简单的Web(续)

    写的有点乱..希望大神指教~~Python的缩进可真的将我缠了好久,想起我们班大神说缩进也是代码啊..修改之前的代码来显示请求的信息,同时重新整理一下代码: class RequestHandler( ...

  6. redhat 配置本地yum源163yum源epel 源,无需卸载yum!无须拷贝ISO,愿网上少一点垃圾教程误人子弟

    都知道redhat不收费,但是其yum服务是要收费的,不想出钱那就自己配置yum源就好了. 首先,博主之前也没用过redhat,第一次用yum装包的时候提示什么没注册之类的,balaba一大堆,然后就 ...

  7. Oracl中sql书写技巧

    1.写脚本(1)为什么不直接设置回滚点?因为服务器上数据库是很多人使用的,所以除了自己操作外,有很多人操作.如果设置回滚点时,回滚后,很多人操作都消失了,因此savepoint不可以.但是可以自己书写 ...

  8. Android Studio导入项目问题小结

    1. import project 之后一直停留在 building 界面 解决方案: 1.随便找一个你能运行的as项目 2.打开gradle-wrapper.properties,文件目录:项目/g ...

  9. Linux中的用户和用户组

      在Linux中,有三种用户: Root 用户:也称为超级用户,对系统拥有完全的控制权限.超级用户可以不受限制的运行任何命令.Root 用户可以看做是系统管理员. 系统用户:系统用户是Linux运行 ...

  10. Xcode最好用的日志打印方法

    一般打印日志都是用的系统自带的NSLog来打印的,假如项目做完了,要上线了,这些打印的日志就会很浪费性能,网上有很多的解决办法,我也是感觉网上的还是有点不方便,所以就自己又修改了一下,分享给大家. 网 ...