Progress bar Как изменить цвет текста как только на него попадет div?

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

<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-ка белая, а вторая черная