Reflex | Progress

✨ 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 ]

Progress

Progress is used to display the progress status for a task that takes a long time or consists of several steps.

rx.vstack(
    rx.progress(value=0, width="100%"),
    rx.progress(value=50, width="100%"),
    rx.progress(value=75, width="100%"),
    rx.progress(value=100, width="100%"),
    rx.progress(is_indeterminate=True, width="100%"),
    spacing="1em",
    min_width=["10em", "20em"],
)

Progress

A bar to display progress.

Props

Prop	Type	Description
`has_stripe`	bool	If true, the progress bar will show stripe
`is_animated`	bool	If true, and hasStripe is true, the stripes will be animated
`is_indeterminate`	bool	If true, the progress will be indeterminate and the value prop will be ignored
`max_`	int	The maximum value of the progress
`min_`	int	The minimum value of the progress
`value`	Union	The value of the progress indicator. If undefined the progress bar will be in indeterminate state
`color_scheme`	str	The color scheme of the progress bar.

Base Event Triggers

← CircularProgress Skeleton →

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

[ Concepts ]

[ Reference ]

Progress

Progress

Props

Base Event Triggers

[ Learn ]