css3 linear-gradient实现页面加载进度条效果
最终效果图:
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实现页面加载进度条效果的更多相关文章
- js页面加载进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- ajax页面加载进度条插件
下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...
- jQuery模拟页面加载进度条
因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟.那要怎么模拟呢? 我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载 ...
- js页面加载进度条(这个就比较正式了,改改时间就完事儿)
不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...
- 插件二之页面加载进度条pace.js
关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...
- 自己写的页面加载进度条jquery插件
(function ($) { var progressId = "progress" + Math.round(Math.random() * 100) var progress ...
- element admin中使用nprogress实现页面加载进度条
主要是知道是nprogress这个组件实现的就可以了,组件的使用方法可参考:https://blog.csdn.net/ltr15036900300/article/details/47321217 ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
随机推荐
- 数据库 之MySQL 简单教程
So Easy系列之MySQL数据库教程 1. 数据库概述 1.1. 数据库概述 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和 ...
- centos 6.5 安装django
首先做这个:python安装setuptools http://blog.csdn.net/zhuying_linux/article/details/8167430 CentOS下将2.6升 ...
- myeclipse实现包的分层显示
- 网页端打开手机上的app
iOS/Android 浏览器(h5)及微信中唤起本地APP 在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这 ...
- mvc学习中的问题汇总
问题1:更新条目时出错.有关详细信息,请参阅内部异常. 初学MVC,正好手上有别人搭建的一个框架.于是直接用了起来.一切似乎都很顺利. 列表页也正常读取了.可是在新增数据时,始终报如上的错.即使用了调 ...
- 如何配置pch文件
pre-Compile Header(预编译头文件) pre-Compile Header简称PCH,由编译器在建立工程时自动生成; 其中存放有工程中已经编译的部分代码; 在以后建立工程时不再重新编译 ...
- 剑指Offer-【面试题05:从头到尾打印链表】
package com.cxz.question5; import java.util.Stack; /* * 输入个链表的头结点,从尾到头反过来打印出每个结点的值. * */ public clas ...
- Win10 UI入门 SliderRectangle
看了@段博琼大哥导航滑动的思路,自己又做了一个类似与黄油相机里面的一个功能 <Grid x:Name="> <Grid.ColumnDefinitions> < ...
- CozyRSS开发记录-中断
接下来会对CozyRSS做一堆的修改,包括界面和功能.因为比较杂乱,而且大多是体力活,所以就不记录了.等下次再发的时候,见到的就是一个有可用性的CozyRSS了!
- NetMQ(二): 请求响应模式 Request-Reply
ZeroMQ系列 之NetMQ 一:zeromq简介 二:NetMQ 请求响应模式 Request-Reply 三:NetMQ 发布订阅模式 Publisher-Subscriber 四:NetMQ ...