Как закрасить дробные части такого индикатора?

Question

[Now159]

<div class="indicator">
  <div class="indicator-value">{{value}}</div>
    <div class="indicator-part" v-for="i in 5" :key="i"  :class="{ 'red': i <= value  }"/>
 </div>

.indicator {
    display: flex;
    align-items: center;

    &-value {
      margin-right: 6px;
      font-size: 22px;
      font-weight: 500;
    }

    &-part {
      width: 12px;
      height: 12px;
      border-radius: 100%;
      background: #464646;
      margin-left: 12px;
    }
  }
.red {
  background-color: red;
}

Если в данном примере в value записать 3.8 например, то закрашивается красным цветом 3 круга, а нужно чтобы дроби тоже прорабатывались и окрашивалось 3 круга и 8/10. Как это сделать?

Answer 1

[0xD34F]

Градиентом нарисовать:

const { filledColor: F, emptyColor: E, ...props } = defineProps({
  value: Number,
  maxValue: Number,
  segments: {
    type: Number,
    default: 5,
  },
  filledColor: {
    type: String,
    default: 'red',
  },
  emptyColor: {
    type: String,
    default: 'black',
  },
});

const background = val =>
  val >= 1 ? F :
  val <= 0 ? E :
             `linear-gradient(to right, ${F}, ${F}, ${val * 100}%, ${E} ${val * 100}%)`;

<div class="rating">
  <div
    v-for="i in segments"
    :style="{ background: background(value / maxValue * segments - i + 1) }"
    class="rating-segment"
  ></div>
</div>