进度条加载是页面加载时的一种交互效果，这样做的目的是提高用户体验。
进度条的的实现分为3大部分：1、页面布局，2、进度条动效，3、何时进度条增加。
文件目录
加载文件顺序
<link rel="stylesheet/less" href="./index.less"> <script src="./zepto.min.js"></script> <script src="./less.js"></script> <script src="./rem.js"></script>
index.less是样式文件
zepto是引入的库
less.js是编译less的
rem.js是移动端屏幕自适应
实现效果
1、页面布局
页面布局采用position布局，进度条居中，css采用less，布局风格为移动端，采用rem单位。
html
<section class="loadingBox">
<div class="progress">
<div class="run"></div>
</div>
</section>
less
html,body{
height: 100%;
}
.loadingBox{
background: #000000;
height: 100%;
overflow: hidden;
position: relative;
display: none;
.progress{
@w:4.6;
@h:.3;
position: absolute;
width: unit(@w,rem);
height: unit(@h,rem);
top: 50%;
left: 50%;
margin-left: unit([email protected]/2,rem);
margin-top: unit(([email protected]/2)+1, rem);
background: #fff;
border-radius: unit(@h/2,rem);
.run{
position: absolute;
top: 0;
left: 0;
width: 0;
height: unit(@h, rem);
// 起始颜色和终点颜色一致就没渐变效果
transition: .3s;
background: -webkit-linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%);
background: linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%);
background-size:unit(@h, rem) unit(@h, rem);
// 从上往下动实现动的效果。
-webkit-border-radius: unit(@h/2, rem);
border-radius: unit(@h/2, rem);
// loadingMove 1s linear infinite both停在最后一帧
-webkit-animation: loadingMove .8s linear infinite both;
animation: loadingMove .8s linear infinite both;
}
}
}
@-webkit-keyframes loadingMove{
0%{
background-position: 0 0;
}
100%{
background-position: 0 -.3rem;
}
}
@keyframes loadingMove{
0%{
background-position: 0 0;
}
100%{
background-position: 0 -.3rem;
}
}
那么问题来了进度条有一个向上走的波纹，波纹是如何实现的，波纹是如何动的，这两个问题的原理是什么
2、进度条动效
波纹是如何实现的
波纹的实现用到的background的 linear-gradient 0-25%是一个颜色，25%-50%是一个颜色，50%-75%是一个颜色，75%-100%是一个颜色，让其不repeat 默认就是repeat的，完全填充进度条长度与宽度，代码如下
background: linear-gradient(left bottom,#5cd85c 0%,#5cd85c 25%,#74c274 25%,#74c274 50%,#5cd85c 50%,#5cd85c 75%,#74c274 75%,#74c274 100%);
波纹是如何动起来的
动起来用到了css中的animation，让进度条的背景从上往下走，就能实现动的效果，那么如何实现从上往下走呢？答案就是用css3的animation的keyframes，0%是让其position为0 0 100%的时候让其position 0 -.3rem 。-.3rem就是进度条的高度，代码如下，loadingMove是桢函数，.8s是持续时间0.8s，linear是线性变化，infinite是无限重复，both是每一循环停在最后一帧。
animation: loadingMove .8s linear infinite both;
loadingMove
@keyframes loadingMove{
0%{
background-position: 0 0;
}
100%{
background-position: 0 -.3rem;
}
}
3、何时进度条增加
众所周知页面上耗费最多的时间是图片，那么可不可以每加载一张图片，就让count加1，那么加载n张再除以总的图片数就是加载进度，加载进度。代码中的逻辑就是，遍历每张图片，等待每张图片加载完毕，count加1，同时更改进度条宽度，达到一个实时加载的效果。
let loadingRender = (function(){
let $loadingBox = $(".loadingBox"),
$run = $loadingBox.find(".run");
// 计算图片加载进度
let imgList =["./1.png","./2.png","./3.png","./4.png"];
let total = imgList.length,
cur = 0;
let computed = function(){
imgList.forEach(function(item){
let tempImg = new Image();
tempImg.src = item;
tempImg.onload = function(){
cur++;
runFn();
tempImg = null;
}
})
}
let runFn = function(){
$run.css("width",(cur/total)*100+"%");
if (cur>=total) {
// 进入的下一个区域的时间节点
let delay = setTimeout(function(){
clearTimeout(delay);
},1500)
}
}
return {
init:function(){
$loadingBox.css("display","block");
computed();
}
}
})();
loadingRender.init();
其中runFn是增加宽度的函数，用了了setTimeout，目的是延缓一会加载，让加载有点节奏，同理，css中transition: .3s;也是为了让加载有节奏。
原文地址：https://www.cnblogs.com/dirkhe/p/9344719.html