Progress Circle

A circular progress indicator that visually represents the completion status of a task or process.

Anatomy

<script>
  import { ProgressCircle } from "@saas-ui/svelte/components/progress-circle";
</script>

<ProgressCircle value={75} size="md" colour="blue" />

Examples

Basic Accessibility

Basic circular progress indicator.

<ProgressCircle value={75} />

Colours Accessibility

Use the colour prop to change the colour of the progress circle.

<VStack gap={4}>
	{#each colours as colour}
		<HStack gap={8} class="items-center px-4">
			<Text size="xs" class="w-16">{colour}</Text>
			<ProgressCircle size="sm" value={30} {colour} rounded />
			<ProgressCircle size="md" value={30} {colour} rounded />
			<ProgressCircle size="lg" value={30} {colour} rounded />
		</HStack>
	{/each}
</VStack>

Custom Thickness Accessibility

Use the thickness prop to customize the stroke width.

<HStack gap={8} class="items-center">
	<ProgressCircle value={75} colour="purple" thickness="2px" />
	<ProgressCircle value={75} colour="purple" />
	<ProgressCircle value={75} colour="purple" thickness="8px" />
</HStack>

Indeterminate Accessibility

Set value to null for indeterminate progress with unknown duration.

<HStack gap={8} class="items-center">
	{#each sizes as size (size)}
		<ProgressCircle size={size as Size} value={null} colour="blue" />
	{/each}
</HStack>

Range Colors Accessibility

Use the trackColour prop for different range colours.

<HStack gap={8}>
	<ProgressCircle value={75} colour="orange" />
	<ProgressCircle value={75} colour="rose" />
	<ProgressCircle value={75} colour="cyan" />
</HStack>

Rounded Accessibility

Circular progress with rounded stroke caps using the rounded prop.

<HStack gap={8}>
	<ProgressCircle value={75} colour="indigo" />
	<ProgressCircle value={75} colour="indigo" rounded />
</HStack>

Sizes Accessibility

Use the size prop to change the size of the progress circle.

<HStack align="center" gap={8} class="flex-wrap">
	{#each sizes as size (size)}
		<VStack gap={2} class="items-center">
			<Text size="xs">{size}</Text>
			<ProgressCircle
				size={size as Size}
				value={30}
				colour="indigo"
				rounded
			/>
		</VStack>
	{/each}
</HStack>

Values Accessibility

Use the value prop to set different progress values.

<HStack gap={6} class="flex-wrap items-center">
	{#each [0, 25, 50, 75, 100] as value}
		<VStack gap={2} class="items-center">
			<ProgressCircle
				{value}
				colour="emerald"
				showValue
				size="lg"
				rounded
			/>
		</VStack>
	{/each}
</HStack>

With Value Text Accessibility

Use the showValue prop to display the value text in the center.

<HStack gap={8} class="items-center">
	{#each ["md", "lg", "xl"] as size (size)}
		<ProgressCircle
			size={size as Size}
			value={65}
			colour="teal"
			showValue
		/>
	{/each}
</HStack>

Props

Prop	Type	Default	Description
`value`	`[object Object]`	`0`	The current value of the progress (0-100). Set to null for indeterminate state.
`min`	`[object Object]`	`0`	The minimum value.
`max`	`[object Object]`	`100`	The maximum value.
`size`	`xs \| sm \| md \| lg \| xl`	`md`	The size of the component.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`gray`	The colour theme of the component.
`showValue`	`boolean`	`false`	Whether to show the value as text in the center.
`thickness`	`text`	-	Custom thickness for the stroke (overrides size default).
`rounded`	`boolean`	`false`	Whether to use rounded stroke caps.
`label`	`text`	-	Accessible label for the progress.
`class`	`text`	-	Additional CSS classes to apply.