Как изменять цвет текста в progress bar'е?

Question

[Maksim Drazdou]

Есть компонент индикатора выполнения:

<script lang="ts" setup>
const props = defineProps({
  percent: {
    type: Number,
    default: 0
  }
});

const counter = ref(0);

const move = () => {
  const id = setInterval(frame, 10);
  function frame() {
    if (counter.value >= props.percent) {
      clearInterval(id);
    } else {
      counter.value ++;
    }
  }
};

onMounted(() => {
  move();
});
</script>

<template>
  <div class="tw-relative">
    <div ref="progress" :style="`width: ${counter}%`"
      class="tw-absolute tw-bg-info-600"
    ></div>
    <span ref="label">{{ counter }}%</span>
  </div>
</template>

Как сделать цвет текста элемента span белым, как только на него попадет div?
Например, если 55% то первая 5-ка белая, а вторая черная.

Answer 1

[Александр Маджугин]

А зачем? Просто пусть этот div перекрывает текст, а сам содержит такой же точно текст нужного цвета так же спозиционированный и выходящий за его край.

Answer 2

[0xD34F]

через mix-blend-mode, например

Answer 3

[Andrew]

Как сделать цвет текста элемента span белым, как только на него попадет div?

С этим ничего не понял.

<div ref="progress" :style="`width: ${counter}%`"
      :class="{first-letter: counter>50}"
      class="tw-absolute tw-bg-info-600"
    ></div>

.first-letter span{
  color: blue;
  font-size: 36px;
}
.first-letter span:first-letter{
  color: red;
}

Но условие контролируйте классом, а в классе можно стилизовать первую букву