Значение процента частичного цвета CSS

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь показать процентное значение с помощью кругов, пытаясь создать изображение ниже с помощью кода. Я получу процентное значение из 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/

Ответ №1:

Вы можете попробовать использовать «жесткий» градиент следующим образом:

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

Ответ №2:

Используйте базовый цвет фона и покройте его линейным градиентом. Управляйте размером линейного градиента, используя backgroundSize в js:

   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>

Ответ №3:

Вы можете использовать псевдоэлемент, противоположный 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>

1. возможно ли это сделать, если значение процента является динамическим

2. @Phreak Да, и радиус границы на самом деле не нужен, так как overflow: hidden вырезы псевдо в любом случае… обновил мой ответ