前言
进度条的场景非常多，比如游戏进入界面前的加载动画、显示完成进度、答题正确率等等，处理比较好的进度条能够让人眼前一亮。
进度条的基本组成
进度条包括外边框、内边框、进度条和百分比框。以及它需要实现的动效，比如进度条需要从0开始增长，百分比框要随着进度条联动。
linear-gradient语法
(1) 使用方向：
background:linear-gradient(direction, color-stop1, color-stop2...)
direction如to left top（不常用）
(2) 使用角度：
background:linear-gradient(angle, color-stop1, color-stop2...)
angle角度是指水平线和渐变线之间的角度
角度与指南针比较类似，0deg指向正北，90deg指向正东，顺时针方向，当然270deg也可以看成是-90deg，可能这张图不够形象，为了方便理解，请看下图。
线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点。
但是这和我们想要的效果还是相差较远啊，别着急，继续往下看：
渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。
理解了中间点的概念，感觉和效果相差不远了。
如角度外，再给颜色定义固定的百分比，这种类似斜栅格的进度条就很顺利的完成了，yeah！
继续思考：普通进度条条纹疏松，但是当需求需要密集的条纹时，你是不是就会有密集恐惧症了呢？但是很明显，密集的进度条相比普通进度条来说更好一点。
如果想做出这种密集的进度条，就需要先做出这种奇怪的图片
这种图片做起来非常复杂，想想代码就很可怕，需要太多的计算，而且需要拼接的非常好，不然很容易被打断。 既然linear-gradient拼接条纹太复杂，有没有能够替代并且满足需求的呢？ 这时候repeating-linear-gradient映入我的眼帘
我是参考以下文章找到答案的，大家有兴趣可以仔细看看，写的非常好！
做一个简单的进度条吧
html
// 外边框
<div class="progress">
// 内边框
<div class="progress-shadow">
// progress-bar（进度条基本样式）
// progress-bar-striped（进度条条纹样式）：
// progress-bar.active（进度条动画）：
<div class="progress-bar progress-bar-striped active" style="width: 0%;">
<div class="progress-value">0%</div>
</div>
</div>
</div>
less
@getRem : 16rem ;
.progress {
margin-top: 100/@getRem;
width: 255/@getRem;
height: 30/@getRem;
background: rgba(0, 0, 0, 0.1);
border-radius: 20/@getRem;
padding-top: 5/@getRem;
.progress-shadow {
width: 240/@getRem;
height: 20/@getRem;
border: 3px solid #a5a39d;
border-radius: 30/@getRem;
background: #d9eebe;
.progress-bar {
position: relative;
margin-left: 0; //进度条靠左
height: 20/@getRem;
border-radius: 30/@getRem;
-webkit-box-shadow: inset -2.121/@getRem -2.121/@getRem 2/@getRem rgba(0, 0, 0, .2);
box-shadow: inset -2.121/@getRem -2.121/@getRem 2/@getRem rgba(0, 0, 0, .2);
&.active {
animation: progress-bar-stripes 0.8s linear infinite reverse;
}
}
.progress-bar-striped {
// 普通进度条写法
// background: linear-gradient(45deg, #f0c105 25%, #ffcd05 25%, #ffcd05 50%, #f0c105 50%, #f0c105 75%, #ffcd05 75%, #ffcd05);
// -webkit-background-size: 40px 40px;
// background-size: 40px 40px;
// 密集进度条写法
background: repeating-linear-gradient(135deg,#f0c105,#f0c105 3.2/@getRem,
#ffcd05 0,#ffcd05 6.4/@getRem);
background-size: 118.4/@getRem 20/@getRem;
}
.progress-value {
width: 53/@getRem;
height: 32/@getRem;
line-height: 26/@getRem;
font-size: 12/@getRem;
font-weight: bold;
color: #cc792f;
background-position: -157/@getRem -1374/@getRem;
position: absolute;
top: -39/@getRem;
right: -16/@getRem;
text-align: center;
}
}
}
@keyframes progress-bar-stripes {
from {
background-position: 60/@getRem 0;
}
to {
background-position: 0 0;
}
}
效果展示
最后，附上项目github链接
github.com/VagrantDani…
