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%);

Answer 2

您可以使用与linear-gradient相对的伪元素，这是一种非常好的方法，如果需要，可以使用IE9

根据评论更新，可以使用圆圈大小进行缩放，并使用百分比作为背景颜色（4：th具有33.33％）

.meter span {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid red;
  overflow: hidden;
}
.meter span:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: gray;
}

.meter span:nth-child(3),
.meter span:nth-child(4) {
  width: 50px;
  height: 50px;
}

.meter span:nth-child(4):before {
  width: 33.33%;
}

<div class="meter">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Answer 3

使用基本背景色，并用线性渐变覆盖它。使用js中的backgroundSize控制线性渐变的大小：

  background: #AB9E95 linear-gradient(to right, #9F1F63 0%, #9F1F63 100%) no-repeat;

工作演示：

colorCircles('65%');

setTimeout(function() {
  colorCircles('37%');
}, 1000);

function colorCircles(percentage) {
  var value = parseInt(percentage, 10);

  var circles = Array.from(document.querySelectorAll('.meter > span'));

  var fullCircles = Math.floor(value / 20);

  var partialCircle = (value % 20) / 20 * 100;

  circles.forEach(function(circle, index) {
    var backgroundSize = '0% 100%';

    if (index < fullCircles) {
      backgroundSize = '100% 100%';
    } else if (index === fullCircles) {
      backgroundSize = partialCircle + '% 100%';
    }

    circle.style.backgroundSize = backgroundSize;
  })
}

.meter {
  display: inline-block;
  box-sizing: border-box;
}
span {
  display: inline-block;
  left: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid red;
  background: #AB9E95 linear-gradient(to right, #9F1F63 0%, #9F1F63 100%) no-repeat;
  transition: background-size 0.3s;
}

<div class="meter">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>