0.17.1

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 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 (
		

			
				
			
			
		

	);
};

API Reference

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.