SvelteKit Radial Progress Component

[rhscjohn-dev]

I was trying to figure out how to update a Radial Progress component in SvelteKit. I coded up this little example. I coded a setInterval function to update every 2 seconds. I then have a counter that is incremented by 1 every time the interval is updated. Whenthe value of counter reaches 60, the counter is reset to 0. The ratio of counter to the maximum value of counter(display Value) is displayed as a percentage in the Radial Progress component.

DaisyUI version: 2.2.1

radialProgress.svelte

<script>
  import { onMount } from "svelte";

  let counter = 0;
  let maxCounter = 60;
  let displayValue = 0;
  onMount(() => {
    const interval = setInterval(() => {
      counter += 1;
      displayValue = Math.floor((counter / maxCounter) * 100);
      if (counter === maxCounter) {
        counter = 0;
      }
    }, 2000);

    return () => {
      clearInterval(interval);
    };
  });
</script>

<div class="container m-8">
  <div class="radial-progress" style="--value:{displayValue};">
    {`${displayValue}%`}
  </div>
  <pre>counter: {counter} displayValue: {displayValue}</pre>
</div>