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 theProgressDonutIndicator's text color.

Data transfer out

Included

Additional

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


	



	



	
		
			
		
		Data transfer out
	

	
		
			
				
			
		
		Included
	

	
		
			
				
			
		
		Additional

Indeterminate Value

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

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

Dynamic Colors

The color of the ProgressDonutIndicator 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, ProgressDonutIndicator } 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 (
		
			
				
			
			
				Value:
				 setValue(Number(e.target.value))} /> (
				{value}%)
			
		
	);
};

API Reference

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

Prop Type Default Description

Prop	Type	Default	Description
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.

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

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.