Progress Circular

Label

50%

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>
  );
}

Size

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>
  );
}

Color

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>
  );
}

Centered Content

50%

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>
  );
}

Indeterminate

Set the value to null to make the progress indeterminate.

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>
  );
}

Format

Use the format prop to customize the output of the ValueText component, options are:

percentage (default) - shows the percentage value
decimal - shows the decimal value (0.0 - 1.0)
Provide formatting using the Intl API

50%

0.5

€0.50

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>
  );
}

Custom Value Text

50 of 100

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>
  );
}

API Reference

CircleRange

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

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

CircleTrack

stroke-surface-200-800

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

Circle

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

Label

whitespace-nowrap

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

Range

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

Property	Default	Type
`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

Track

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]

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

Root

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

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

RootContext

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