Progress Circle

Progress circles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. They can represent determinate or indeterminate progress.

Example

UI Recommendations

1. Use the appropriate size based on the parent’s size.
2. Use static_color="white" or static_color="black" if necessary to make sure the progress circle has enough contrast with the background.
3. If the value of the progress is unknown, use is_indeterminate=True.

Value

The progress is controlled by the value, min_value, and max_value props. The default values of min_value and max_value are 0 and 100, respectively.

Indeterminate

Use is_indeterminate=True if the progress can not be determined.

Size

Progress Circle comes in three different sizes determined by the size prop: "S", "M", and "L". By default, the size is "M".

Static Color

The static_color prop can be used to control the color of the progress circle between the default color, "black", and "white".

API Reference

ProgressCircles show the progression of a system operation such as downloading, uploading, or processing, in a visual way. They can represent determinate or indeterminate progress.

Returns: Element The rendered ProgressCircle element.

Parameters	Type	Default	Description
size	Literal['S', 'M', 'L']	'M'	What the progress_circle's diameter should be.
static_color	Literal['white', 'black'] | None	None	The static color style to apply. Useful when the button appears over a color background.
is_indeterminate	bool | None	None	Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.
value	float	0	The current value (controlled).
min_value	float	0	The smallest value allowed for the input.
max_value	float	100	The largest value allowed for the input.
key	str | None	None	A unique identifier used by React to render elements in a list.