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 */}
<Progress value={value} className="items-center w-fit">
<Progress.Label>Progress</Progress.Label>
<Progress.Circle>
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
<Progress.ValueText />
</Progress>
{/* Control */}
<Slider className="w-full" value={[value]} onValueChange={(e) => setValue(e.value[0])} step={10}>
<Slider.Control>
<Slider.Track>
<Slider.Range className="bg-transparent" />
</Slider.Track>
<Slider.Thumb index={0}>
<Slider.HiddenInput />
</Slider.Thumb>
</Slider.Control>
</Slider>
</div>
);
}
<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 -->
<Progress {value} class="items-center w-fit">
<Progress.Label>Progress</Progress.Label>
<Progress.Circle>
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
<Progress.ValueText />
</Progress>
<!-- Control -->
<Slider class="w-full" value={[value]} onValueChange={(e) => (value = e.value[0])} step={10}>
<Slider.Control>
<Slider.Track>
<Slider.Range class="bg-transparent" />
</Slider.Track>
<Slider.Thumb index={0}>
<Slider.HiddenInput />
</Slider.Thumb>
</Slider.Control>
</Slider>
</div>
Size
Use different sizes for context-appropriate indicators.
import { Progress } from '@skeletonlabs/skeleton-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 className="[--size:--spacing(16)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
</Progress>
<Progress value={75}>
<Progress.Circle>
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
</Progress>
<Progress value={75} className="w-fit">
<Progress.Circle className="[--size:--spacing(32)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
</Progress>
</div>
);
}
<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 class="[--size:--spacing(12)]">
<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 class="[--size:--spacing(32)]">
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
</Progress>
</div>
Color
Change the track and indicator color using utility classes or custom CSS variables to match your design system.
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-50-950" />
<Progress.CircleRange className="stroke-primary-500" />
</Progress.Circle>
</Progress>
<Progress value={40} className="w-fit">
<Progress.Circle>
<Progress.CircleTrack className="stroke-secondary-50-950" />
<Progress.CircleRange className="stroke-secondary-500" />
</Progress.Circle>
</Progress>
<Progress value={40} className="w-fit">
<Progress.Circle>
<Progress.CircleTrack className="stroke-tertiary-50-950" />
<Progress.CircleRange className="stroke-tertiary-500" />
</Progress.Circle>
</Progress>
</div>
);
}
<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-50-950" />
<Progress.CircleRange class="stroke-primary-500" />
</Progress.Circle>
</Progress>
<Progress value={40} class="w-fit">
<Progress.Circle>
<Progress.CircleTrack class="stroke-secondary-50-950" />
<Progress.CircleRange class="stroke-secondary-500" />
</Progress.Circle>
</Progress>
<Progress value={40} class="w-fit">
<Progress.Circle>
<Progress.CircleTrack class="stroke-tertiary-50-950" />
<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).
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>
);
}
<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
Set a null value to enable indeterminate mode.
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>
);
}
<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>
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.
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>
);
}
<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.
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>
);
}
<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>
Anatomy
Here’s an overview of how the Progress (Circular) component is structured in code:
import { Progress } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
<Progress>
<Progress.Label />
<Progress.Circle>
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
<Progress.ValueText />
</Progress>
);
}
<script lang="ts">
import { Progress } from '@skeletonlabs/skeleton-svelte';
</script>
<Progress>
<Progress.Label />
<Progress.Circle>
<Progress.CircleTrack />
<Progress.CircleRange />
</Progress.Circle>
<Progress.ValueText />
</Progress>
API Reference
Root
| 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
| 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
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"div">) => Element) | undefined Render the element yourself |
Range
| 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
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"circle">) => Element) | undefined Render the element yourself |
CircleRange
| Prop | Default | Type |
|---|
element | — | ((attributes: HTMLAttributes<"circle">) => Element) | undefined Render the element yourself |
Root
| 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
| 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
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
Range
| 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
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"circle">]> | undefined Render the element yourself |
CircleRange
| Prop | Default | Type |
|---|
element | — | Snippet<[HTMLAttributes<"circle">]> | undefined Render the element yourself |