Progress (Linear)

75%

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

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

<Progress {value}>
	<Progress.Label>{value}%</Progress.Label>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress>

50%

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

export default function Default() {
	return (
		<Progress>
			<Progress.Label>
				<Progress.ValueText />
			</Progress.Label>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

Color

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

<div class="flex w-full flex-col gap-8">
	<Progress>
		<Progress.Track>
			<Progress.Range class="bg-primary-500" />
		</Progress.Track>
	</Progress>
	<Progress>
		<Progress.Track>
			<Progress.Range class="bg-secondary-500" />
		</Progress.Track>
	</Progress>
	<Progress>
		<Progress.Track>
			<Progress.Range class="bg-tertiary-500" />
		</Progress.Track>
	</Progress>
</div>

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

export default function Color() {
	return (
		<div className="flex w-full flex-col gap-8">
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-primary-500" />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-secondary-500" />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track>
					<Progress.Range className="bg-tertiary-500" />
				</Progress.Track>
			</Progress>
		</div>
	);
}

Height

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

<div class="flex w-full flex-col gap-8">
	<Progress>
		<Progress.Track class="h-1">
			<Progress.Range />
		</Progress.Track>
	</Progress>
	<Progress>
		<Progress.Track class="h-4">
			<Progress.Range />
		</Progress.Track>
	</Progress>
	<Progress>
		<Progress.Track class="h-6">
			<Progress.Range />
		</Progress.Track>
	</Progress>
</div>

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

export default function Height() {
	return (
		<div className="flex w-full flex-col gap-8">
			<Progress>
				<Progress.Track className="h-1">
					<Progress.Range />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track className="h-4">
					<Progress.Range />
				</Progress.Track>
			</Progress>
			<Progress>
				<Progress.Track className="h-6">
					<Progress.Range />
				</Progress.Track>
			</Progress>
		</div>
	);
}

Orientation

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

<Progress orientation="vertical">
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress>

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

export default function Orientation() {
	return (
		<Progress orientation="vertical">
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

Indeterminate

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

<Progress value={null}>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress>

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

export default function Indeterminate() {
	return (
		<Progress value={null}>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

Custom Animation

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

<Progress value={null}>
	<Progress.Track>
		<Progress.Range class="animate-[custom-animation_2s_ease-in-out_infinite]" />
	</Progress.Track>
</Progress>

<style>
	@keyframes -global-custom-animation {
		from {
			scale: 0.5 1;
			transform: translateX(-200%);
		}
		25% {
			transform: translateX(50%);
		}
		50% {
			transform: translateX(-50%);
		}
		75% {
			transform: translateX(150%);
		}
		to {
			scale: 0.5 1;
			transform: translateX(200%);
		}
	}
</style>

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

export default function CustomAnimation() {
	return (
		<>
			<Progress value={null}>
				<Progress.Track>
					<Progress.Range className="animate-[custom-animation_2s_ease-in-out_infinite]" />
				</Progress.Track>
			</Progress>
			<style>{`
                @keyframes custom-animation {
                    from {
                        scale: 0.5 1;
                        transform: translateX(-200%);
                    }
                    25% {
                        transform: translateX(50%);
                    }
                    50% {
                        transform: translateX(-50%);
                    }
                    75% {
                        transform: translateX(150%);
                    }
                    to {
                        scale: 0.5 1;
                        transform: translateX(200%);
                    }
                }
            `}</style>
		</>
	);
}

Native Alternative

<progress class="progress" value="50" max="100"></progress>

export default function Native() {
	return <progress className="progress" value="50" max="100" />;
}

Direction

Label

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

<Progress dir="rtl">
	<Progress.Label>Label</Progress.Label>
	<Progress.Track>
		<Progress.Range />
	</Progress.Track>
</Progress>

Label

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

export default function Dir() {
	return (
		<Progress dir="rtl">
			<Progress.Label>Label</Progress.Label>
			<Progress.Track>
				<Progress.Range />
			</Progress.Track>
		</Progress>
	);
}

API Reference

Root

Property	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

RootProvider

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

RootContext

Property	Default	Type
`children`	-	(progress: ProgressApi<PropTypes>) => ReactNode

Label

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

ValueText

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

Track

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

Range

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

Circle

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

CircleTrack

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

CircleRange

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