css渐变做出突变进度条

css渐变色做出突变色进度条

一开始接到需求的时候以为是一个简单的进度条,用两个div上下重叠,下面放浅色,上面div根据进度设置width长度盖住下方div 即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.progress-bar{
/* 进度条的槽 */
width:100%;
/* 设置进度条的高度 */
height: 5px;
/*进度条外层div的背景色,进度未达到的地方的颜色 */
background-color: #EFE7CC;
border-radius: 3px;
}
.progress{
/* 进度部分 */
/* 利用继承父元素宽度的百分比控制进度 */
width: 20%;
height: 100%;
/* 内层背景色即进度达到的颜色 */
background-color: #F6B12F;
border-radius: 3px;
}
1
2
3
4
<div class="progress-bar">
<div class="progress">
</div>
</div>

效果如下:

不过设计要求要有断点的进图条,并提供给我一张无背景的白点图

我们将原来在上方的div背景图设置为白点,原先在下方的div 的颜色设置为突变色来表达进度

我们常用的渐变色可以一般是从左到右 or 从右到左

1
background: linear-gradient(270deg,rgba(246,177,47,1) 0%,rgba(224,196,93,1) 100%)

突变色其实就是将渐变色左右两边设置同一个颜色这样就不渐变了,中间左右两边各自用一种颜色渐变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.orders_count .progress_bar {
height: 12px;
border-radius:20px;
/*进度条外层div的背景色,进度未达到的地方的颜色 */
}
.orders_count .progress{
/* 进度部分 */
/* 利用继承父元素宽度的百分比控制进度 */
height: 12px;
/* 内层背景色即进度达到的颜色 */
background: url(<%= asset_path 'kessho/白点.png' %> ) no-repeat center center;
background-size: 96% 100%;
opacity:1;
border-radius: 3px;
}
1
2
3
<div class="progress_bar" style="background: linear-gradient(to right, #F6B12F 0%, #F6B12F 20%, #EFE7CC 20%, #EFE7CC 100%);">
<div class="progress"></div>
</div>

效果如下: