Wuxh

Front-end Development

0%

用CSS3渐变背景实现进度条

在开发中, 时不时会遇到写进度条的功能, 比如投票比例, 视频播放进度, 文件上传进度…

需求分析

如果需要考虑兼容性的话,使用 CSS3 radial-gradient 并不是最好的方案;
具体兼容大家可以自行查看 Can i use radial-gradient;

实现代码

HTML部分

1
<div class="progress"></div>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.progress {
--color: green;
--percentage: 50;
height: 50px;
border-radius: 30px;
background-color: rgba(0, 0, 0, 0.1);
width: 100%;
background-image: radial-gradient(
closest-side circle at calc(var(--percentage) * 1%),
var(--color),
var(--color) 100%,
transparent
), linear-gradient(var(--color), var(--color));
background-size: 100%, calc(var(--percentage) * 1%);
background-repeat: no-repeat;
}

属性介绍

radial-gradient MDN 文档;

1
background: radial-gradient(center, shape, size, start-color, ..., last-color);

center: 渐变起点的位置,可以为百分比,默认是图形的正中心。

shape: 渐变的形状,ellipse 表示椭圆形,circle 表示圆形。默认为 ellipse,如果元素形状为正方形的元素,则 ellipsecircle 显示一样。

size: 渐变的大小,即渐变到哪里停止,它有四个值。

closest-side

  • 最近边: closest-side
  • 最远边: farthest-side
  • 最近角: closest-corner
  • 最远角: farthest-corner

linear-gradient MDN 文档;

1
background: linear-gradient(angle, side-or-corner, color-stop);

angle: 角度

side-or-corner: 描述渐变线的起始点位置 left / right / top / bottom

color-stop: 结束颜色;

第二种实现方法

比较简单, 贴出来方便自己以后复制 (使用两个 div 实现)

HTML部分

1
2
3
<div class="progress-container">
<div class="progress"></div>
</div>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.progress-container,
.progress-container .progress {
width: 100%;
height: 30px;
border-radius: 15px;
overflow: hidden;
}

.progress-container {
background-color: rgba(0, 0, 0, 0.1);
}

.progress-container .progress {
width: 30%;
background-color: red;
}