用css3渐变背景实现进度条

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

需求分析

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

使用了 自定义属性 和 线性渐变 和 径向渐变

实现效果

用css3渐变背景实现进度条

代码：

html部分

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

css部分

  .progress {
    --color: green;
    --percentage: 50;
    height: 50px;
    border-radius: 30px;
    background-color: rgba(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

radial-gradient MDN 文档;

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

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

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

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

closest-side

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

linear-gradient

linear-gradient MDN 文档;

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

angle : 角度

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

color-stop : 结束颜色;

第二种实现方法

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

进度条

html部分

  <div class="progress-container">
    <div class="progress"></div>
  </div>

css部分

  .progress-container,
  .progress-container .progress {
    width: 100%;
    height: 30px;
    border-radius: 15px;
    overflow: hidden;
  }

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

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