Progress Ring

<script lang="ts">
  import { ProgressRing } from '@skeletonlabs/skeleton-svelte';

  let value = $state(25);
  let max = 100;
</script>

<div class="grid grid-cols-1 gap-4 justify-center">
  <ProgressRing {value} {max} />
  <input type="range" class="input max-w-32" bind:value {max} />
</div>

<script lang="ts">
  import { ProgressRing } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="grid grid-cols-1 gap-4 justify-center">
  <ProgressRing value={25} max={100} showLabel />
</div>

<script lang="ts">
  import { ProgressRing } from '@skeletonlabs/skeleton-svelte';
  import IconThermometer from 'lucide-svelte/icons/thermometer-sun';
</script>

<ProgressRing value={60} max={100} meterStroke="stroke-error-500" strokeLinecap="butt">
  <IconThermometer size={48} />
</ProgressRing>

<script lang="ts">
  import { ProgressRing } from '@skeletonlabs/skeleton-svelte';
</script>

<ProgressRing value={null} size="size-14" meterStroke="stroke-tertiary-600-400" trackStroke="stroke-tertiary-50-950" />