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 theProgressDonut.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

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 theProgressDonut.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. This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0. The default value is 100.
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. This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted. If set to `"indeterminate"`, the progress bar is considered indeterminate.

ProgressDonut.Indicator

The indicator for the circular progress bar.

All props from svg g.