0.32.3
Theme Switcher

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.

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

<ProgressDonut.Root className="size-10" value="indeterminate" 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.

PropTypeDefaultDescription
max
number100

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.