Progress - Circular

Label

50%

tsx

import { Progress, Slider } from '@skeletonlabs/skeleton-react';
import { useState } from 'react';

export default function Default() {
	const [value, setValue] = useState(50);
	return (
		<div className="flex flex-col gap-8 items-center">
			<Progress value={value} className="items-center w-fit">
				<Progress.Label>Label</Progress.Label>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Slider className="w-full" value={[value]} onValueChange={(e) => setValue(e.value[0])} step={10}>
				<Slider.Control>
					<Slider.Track>
						<Slider.Range />
					</Slider.Track>
					<Slider.Thumb index={0}>
						<Slider.HiddenInput />
					</Slider.Thumb>
				</Slider.Control>
			</Slider>
		</div>
	);
}

Label

50%

svelte

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

	let value = $state(50);
</script>

<div class="flex flex-col gap-8 items-center">
	<Progress {value} class="items-center w-fit">
		<Progress.Label>Label</Progress.Label>
		<Progress.Circle>
			<Progress.CircleTrack />
			<Progress.CircleRange />
		</Progress.Circle>
		<Progress.ValueText />
	</Progress>
	<Slider class="w-full" value={[value]} onValueChange={(e) => (value = e.value[0])} step={10}>
		<Slider.Control>
			<Slider.Track>
				<Slider.Range />
			</Slider.Track>
			<Slider.Thumb index={0}>
				<Slider.HiddenInput />
			</Slider.Thumb>
		</Slider.Control>
	</Slider>
</div>

Size

Use different sizes for context-appropriate indicators.

tsx

import { Progress } from '@skeletonlabs/skeleton-react';
import type { CSSProperties } from 'react';

export default function Size() {
	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress value={75} className="w-fit">
				<Progress.Circle style={{ '--size': '48px', '--thickness': '6px' } as CSSProperties}>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
			<Progress value={75} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
			<Progress value={75} className="w-fit">
				<Progress.Circle style={{ '--size': '125px', '--thickness': '12px' } as CSSProperties}>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
			</Progress>
		</div>
	);
}

svelte

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

<div class="flex gap-4 justify-evenly items-center w-full">
	<Progress value={75} class="w-fit">
		<Progress.Circle style="--size: 48px; --thickness: 6px;">
			<Progress.CircleTrack />
			<Progress.CircleRange />
		</Progress.Circle>
	</Progress>
	<Progress value={75} class="w-fit">
		<Progress.Circle>
			<Progress.CircleTrack />
			<Progress.CircleRange />
		</Progress.Circle>
	</Progress>
	<Progress value={75} class="w-fit">
		<Progress.Circle style="--size: 125px; --thickness: 12px;">
			<Progress.CircleTrack />
			<Progress.CircleRange />
		</Progress.Circle>
	</Progress>
</div>

Color

Change the track and indicator colour using utility classes or custom CSS variables to match your design system.

tsx

import { Progress } from '@skeletonlabs/skeleton-react';

export default function Color() {
	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-primary-500/30" />
					<Progress.CircleRange className="stroke-primary-500" />
				</Progress.Circle>
			</Progress>
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-secondary-500/30" />
					<Progress.CircleRange className="stroke-secondary-500" />
				</Progress.Circle>
			</Progress>
			<Progress value={40} className="w-fit">
				<Progress.Circle>
					<Progress.CircleTrack className="stroke-tertiary-500/30" />
					<Progress.CircleRange className="stroke-tertiary-500" />
				</Progress.Circle>
			</Progress>
		</div>
	);
}

svelte

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

<div class="flex gap-4 justify-evenly items-center w-full">
	<Progress value={40} class="w-fit">
		<Progress.Circle>
			<Progress.CircleTrack class="stroke-primary-500/30" />
			<Progress.CircleRange class="stroke-primary-500" />
		</Progress.Circle>
	</Progress>
	<Progress value={40} class="w-fit">
		<Progress.Circle>
			<Progress.CircleTrack class="stroke-secondary-500/30" />
			<Progress.CircleRange class="stroke-secondary-500" />
		</Progress.Circle>
	</Progress>
	<Progress value={40} class="w-fit">
		<Progress.Circle>
			<Progress.CircleTrack class="stroke-tertiary-500/30" />
			<Progress.CircleRange class="stroke-tertiary-500" />
		</Progress.Circle>
	</Progress>
</div>

Centered Content

Place content in the center of the circular progress if needed (for example, a numeric value).

50%

tsx

import { Progress } from '@skeletonlabs/skeleton-react';

export default function CenteredContent() {
	return (
		<Progress className="w-fit relative">
			<div className="absolute inset-0 flex items-center justify-center">
				<Progress.ValueText />
			</div>
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
		</Progress>
	);
}

50%

svelte

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

<Progress class="w-fit relative">
	<div class="absolute inset-0 flex items-center justify-center">
		<Progress.ValueText />
	</div>
	<Progress.Circle>
		<Progress.CircleTrack />
		<Progress.CircleRange />
	</Progress.Circle>
</Progress>

Indeterminate

Use a null value to enable indeterminate mode.

tsx

import { Progress } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<Progress className="items-center w-fit" value={null}>
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
			<Progress.ValueText />
		</Progress>
	);
}

svelte

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

<Progress class="items-center w-fit" value={null}>
	<Progress.Circle>
		<Progress.CircleTrack />
		<Progress.CircleRange />
	</Progress.Circle>
	<Progress.ValueText />
</Progress>

Format

Use the format prop to customize the output of the ValueText component. Options include:

percentage (default)
decimal (0.0 - 1.0)
Custom - via the Intl API .

50%

0.5

€0.50

tsx

import { Progress } from '@skeletonlabs/skeleton-react';

export default function Format() {
	return (
		<div className="flex gap-4 justify-evenly items-center w-full">
			<Progress className="items-center w-fit" formatOptions={{ style: 'percent' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Progress className="items-center w-fit" formatOptions={{ style: 'decimal' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
			<Progress className="items-center w-fit" formatOptions={{ style: 'currency', currency: 'EUR' }}>
				<Progress.Circle>
					<Progress.CircleTrack />
					<Progress.CircleRange />
				</Progress.Circle>
				<Progress.ValueText />
			</Progress>
		</div>
	);
}

50%

0.5

€0.50

svelte

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

<div class="flex gap-4 justify-evenly items-center w-full">
	<Progress class="items-center w-fit" formatOptions={{ style: 'percent' }}>
		<Progress.Circle>
			<Progress.CircleTrack />
			<Progress.CircleRange />
		</Progress.Circle>
		<Progress.ValueText />
	</Progress>
	<Progress class="items-center w-fit" formatOptions={{ style: 'decimal' }}>
		<Progress.Circle>
			<Progress.CircleTrack />
			<Progress.CircleRange />
		</Progress.Circle>
		<Progress.ValueText />
	</Progress>
	<Progress class="items-center w-fit" formatOptions={{ style: 'currency', currency: 'EUR' }}>
		<Progress.Circle>
			<Progress.CircleTrack />
			<Progress.CircleRange />
		</Progress.Circle>
		<Progress.ValueText />
	</Progress>
</div>

Custom Value Text

Provide a custom renderer for the ValueText if you need to show a different layout or label.

50 of 100

tsx

import { Progress } from '@skeletonlabs/skeleton-react';

export default function CustomValueText() {
	return (
		<Progress className="items-center w-fit">
			<Progress.Circle>
				<Progress.CircleTrack />
				<Progress.CircleRange />
			</Progress.Circle>
			<Progress.ValueText>
				<Progress.Context>{(progress) => `${progress.value} of ${progress.max}`}</Progress.Context>
			</Progress.ValueText>
		</Progress>
	);
}

50 of 100

svelte

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

<Progress class="items-center w-fit">
	<Progress.Circle>
		<Progress.CircleTrack />
		<Progress.CircleRange />
	</Progress.Circle>
	<Progress.ValueText>
		<Progress.Context>
			{#snippet children(progress)}
				{progress().value} of {progress().max}
			{/snippet}
		</Progress.Context>
	</Progress.ValueText>
</Progress>

API Reference

Root

txt

flex flex-col gap-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:items-center

Prop	Default	Type
`ids`	—	Partial<{ root: string; track: string; label: string; circle: string; }> \| undefined The ids of the elements in the progress bar. Useful for composition.
`value`	—	number \| null \| undefined The controlled value of the progress bar.
`defaultValue`	50	number \| null \| undefined The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar.
`min`	0	number \| undefined The minimum allowed value of the progress bar.
`max`	100	number \| undefined The maximum allowed value of the progress bar.
`translations`	—	IntlTranslations \| undefined The localized messages to use.
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Callback fired when the value changes.
`formatOptions`	{ style: "percent" }	NumberFormatOptions \| undefined The options to use for formatting the value.
`locale`	"en-US"	string \| undefined The locale to use for formatting the value.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the element.
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	ProgressApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(progress: ProgressApi<PropTypes>) => ReactNode

Label

txt

whitespace-nowrap

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

ValueText

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"span">) => Element) \| undefined Render the element yourself

Track

txt

bg-surface-200-800 rounded-base overflow-hidden data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-[100px]

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Range

txt

h-full bg-surface-950-50 rounded-base data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:data-[state=indeterminate]:animate-progress-linear-indeterminate-horizontal data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:data-[state=indeterminate]:animate-progress-linear-indeterminate-vertical

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Circle

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"svg">) => Element) \| undefined Render the element yourself

CircleTrack

txt

stroke-surface-200-800

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"circle">) => Element) \| undefined Render the element yourself

CircleRange

txt

stroke-primary-500 transition-[stroke-dashoffset] ease-in-out data-[state=indeterminate]:animate-progress-circular-indeterminate

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"circle">) => Element) \| undefined Render the element yourself

Root

txt

flex flex-col gap-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:items-center

Prop	Default	Type
`ids`	—	Partial<{ root: string; track: string; label: string; circle: string; }> \| undefined The ids of the elements in the progress bar. Useful for composition.
`value`	—	number \| null \| undefined The controlled value of the progress bar.
`defaultValue`	50	number \| null \| undefined The initial value of the progress bar when rendered. Use when you don't need to control the value of the progress bar.
`min`	0	number \| undefined The minimum allowed value of the progress bar.
`max`	100	number \| undefined The maximum allowed value of the progress bar.
`translations`	—	IntlTranslations \| undefined The localized messages to use.
`onValueChange`	—	((details: ValueChangeDetails) => void) \| undefined Callback fired when the value changes.
`formatOptions`	{ style: "percent" }	NumberFormatOptions \| undefined The options to use for formatting the value.
`locale`	"en-US"	string \| undefined The locale to use for formatting the value.
`dir`	"ltr"	"ltr" \| "rtl" \| undefined The document's text/writing direction.
`getRootNode`	—	(() => ShadowRoot \| Node \| Document) \| undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
`orientation`	"horizontal"	"horizontal" \| "vertical" \| undefined The orientation of the element.
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Provider

Prop	Default	Type
`value`	—	() => ProgressApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => ProgressApi<PropTypes>]>

Label

txt

whitespace-nowrap

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

ValueText

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"span">]> \| undefined Render the element yourself

Track

txt

bg-surface-200-800 rounded-base overflow-hidden data-[orientation=horizontal]:w-full data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-[100px]

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Range

txt

h-full bg-surface-950-50 rounded-base data-[orientation=horizontal]:transition-[width] data-[orientation=horizontal]:data-[state=indeterminate]:animate-progress-linear-indeterminate-horizontal data-[orientation=vertical]:transition-[height] data-[orientation=vertical]:data-[state=indeterminate]:animate-progress-linear-indeterminate-vertical

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Circle

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"svg">]> \| undefined Render the element yourself

CircleTrack

txt

stroke-surface-200-800

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"circle">]> \| undefined Render the element yourself

CircleRange

txt

stroke-primary-500 transition-[stroke-dashoffset] ease-in-out data-[state=indeterminate]:animate-progress-circular-indeterminate

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"circle">]> \| undefined Render the element yourself