javascript - CSS 局部颜色百分比值

Question

我试图用圆圈显示百分比值，试图用代码创建下面的图像。我将从 HTML 中获取百分比值。我只是不确定如何使用 css 为圆圈部分着色。

<div class="meter" data-attr="50%">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

.meter {
  span {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid red;
  }
}

<script>
  var circlePrecent = 50%; 
</script>

https://jsfiddle.net/j8of7yag/

Answer 1

您可以像这样尝试使用“硬”渐变:

background: linear-gradient(to right,  #ff0000 0%,#ff0000 50%,#ffff00 50%,#ffff00 100%);