Progress Donut

Displays an indicator showing the completion progress of a task as a circular progress bar.

The indicator color is inherited via currentColor. Override the default (accent-600) by setting the ProgressDonut.Indicator's text color.

Data transfer out

Included

Additional

import { ProgressDonut } from "@ngrok/mantle/progress";

<ProgressDonut.Root value={60} className="size-10" strokeWidth="0.375rem">
	<ProgressDonut.Indicator />
</ProgressDonut.Root>

<ProgressDonut.Root value={60} className="size-10" strokeWidth="0.375rem">
	<ProgressDonut.Indicator className="text-fuchsia-600" />
</ProgressDonut.Root>

<div className="flex flex-col gap-2">
	<div className="flex items-center gap-1.5 text-sm">
		<ProgressDonut.Root value={100} className="size-6">
			<ProgressDonut.Indicator />
		</ProgressDonut.Root>
		Data transfer out
	</div>

	<div className="flex items-center gap-1.5 text-xs">
		<div className="grid w-6 place-items-center">
			<ProgressDonut.Root value={100} className="size-4" strokeWidth="0.1875rem">
				<ProgressDonut.Indicator />
			</ProgressDonut.Root>
		</div>
		Included
	</div>

	<div className="flex items-center gap-1.5 text-xs">
		<div className="grid w-6 place-items-center">
			<ProgressDonut.Root value={25} className="size-4" strokeWidth="0.1875rem">
				<ProgressDonut.Indicator className="text-success-600" />
			</ProgressDonut.Root>
		</div>
		Additional
	</div>
</div>

Indeterminate Value

You can set the value prop to "indeterminate" to show the progress bar in an indeterminate state.

You can control the rotation speed with the indeterminateRotationSpeed prop.

import { ProgressDonut } from "@ngrok/mantle/progress";

<ProgressDonut.Root className="size-10" value="indeterminate" strokeWidth="0.375rem">
	<ProgressDonut.Indicator />
</ProgressDonut.Root>

<ProgressDonut.Root
	className="size-10"
	value="indeterminate"
	indeterminateRotationSpeed="animation-duration-[2s]"
	strokeWidth="0.375rem"
>
	<ProgressDonut.Indicator />
</ProgressDonut.Root>

Dynamic Colors

The color of the ProgressDonut.Indicator is inherited from the parent text color using currentColor. Using this, you can easily change the color of it based on the current progress value.

import { ProgressDonut } from "@ngrok/mantle/progress";

const Example = () => {
	const [value, setValue] = useState(0);

	function computeColor() {
		switch (true) {
			case value <= 20:
				return "text-accent-600";
			case value <= 40:
				return "text-success-600";
			case value <= 60:
				return "text-warning-600";
			case value <= 80:
				return "text-fuchsia-600";
			default:
				return "text-danger-600";
		}
	}

	return (
		<form className="space-y-4">
			<ProgressDonut.Root value={value} className="size-10" strokeWidth="0.375rem">
				<ProgressDonut.Indicator className={computeColor()} />
			</ProgressDonut.Root>
			<label className="block space-y-1">
				<p>Value:</p>
				<input
					type="range"
					min={0}
					max={100}
					value={value}
					onChange={(e) => setValue(Number(e.target.value))}
				/>{" "}
				({value}%)
			</label>
		</form>
	);
};

API Reference

ProgressDonut.Root

A simple circular progress bar which shows the completion progress of a task.

The indicator color is inherited via currentColor. Override the default (accent-600) by setting the ProgressDonut.Indicator's text color.

The ProgressDonut accepts the following props in addition to the standard HTML svg attributes.

Prop	Type	Default	Description
`indeterminateRotationSpeed`	`animation-duration-${string}`	`"animation-duration-[15s]"`	Controls the rotation speed of the indeterminate spinner state, as a Tailwind `animation-duration-*` class.
`max`	`number`	`100`	The maximum value of the progress bar. Must have a value greater than 0.
`strokeWidth`	`number` \| `${number}rem`	`"0.25rem"`	The width of the progress bar stroke. Note, we clamp the stroke width to a minimum of 1px and max of 12px since it is proportional to the viewbox size (0 0 32 32).
`value`	`number` \| `"indeterminate"`	`0`	The current value of the progress bar. Must be between 0 and `max`. If set to `"indeterminate"`, the progress bar is considered indeterminate.

ProgressDonut.Indicator

The indicator for the circular progress bar.

All props from svg g.