Progress Bar

Progress Bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either 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 ensure 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 Bar comes in two different sizes determined by the size prop: "S" and "L". By default, the size is "L".

Static Color

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

API Reference

ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.

Returns: Element The rendered ProgressBar element.

Parameters	Type	Default	Description
size	Literal['S', 'L']	'L'	How thick the bar should be.
static_color	Literal['white', 'black'] | None	None	The static color style to apply. Useful when the button appears over a color background.
label_position	Literal['top', 'side']	'top'	The label's overall position relative to the element it is labeling.
show_value_label	bool | None	None	Whether the value label should be displayed. True by default if the label is provided.
label	None | bool | int | str | Element | List[NodeType]	None	The content to display as the label.
value_label	None | bool | int | str | Element | List[NodeType]	None	The content to display as the value's label.
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.
is_indeterminate	bool | None	None	Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.
key	str | None	None	A unique identifier used by React to render elements in a list.