Progress Ring - Skeleton

<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>

Icons

Provide icons or other content using the children snippet.

<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>

Indeterminate

Uses indeterminate mode when value is explicitly set to null.

<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" />