Reflex | CircularProgress

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

CircularProgress

The CircularProgress component is used to indicate the progress for determinate and indeterminate processes. Determinate progress: fills the circular track with color, as the indicator moves from 0 to 360 degrees. Indeterminate progress: grows and shrinks the indicator while moving along the circular track.

rx.hstack(
    rx.circular_progress(value=0),
    rx.circular_progress(value=25),
    rx.circular_progress(
        rx.circular_progress_label(50), value=50
    ),
    rx.circular_progress(value=75),
    rx.circular_progress(value=100),
    rx.circular_progress(is_indeterminate=True),
)

CircularProgress

The CircularProgress component is used to indicate the progress for determinate and indeterminate processes.

Props

Prop	Type	Description
`cap_is_round`	bool	If true, the cap of the progress indicator will be rounded.
`is_indeterminate`	bool	If true, the progress will be indeterminate and the value prop will be ignored
`max_`	int	Maximum value defining 100% progress made (must be higher than 'min')
`min_`	int	Minimum value defining 'no progress' (must be lower than 'max')
`thickness`	int	This defines the stroke width of the svg circle.
`track_color`	str	The color name of the progress track. Use a color key in the theme object
`value`	int	Current progress (must be between min/max).
`value_text`	str	The desired valueText to use in place of the value.
`color`	str	The color name of the progress bar

Base Event Triggers

CircularProgressLabel

Label of CircularProcess.

No props for CircularProgressLabel.

Base Event Triggers

← Alert Progress →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

CircularProgress

CircularProgress

Props

Base Event Triggers

CircularProgressLabel

No props for CircularProgressLabel.

Base Event Triggers

[ Learn ]