See what components people have made with Reflex!

/

/

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

Basic Example

rx.progress expects the value prop to set the progress value. width is default to 100%, the width of its parent component.

For a dynamic progress, you can assign a state variable to the value prop instead of a constant value.

Expand

API Reference

A progress bar component.

rx.box(rx.progress(value=50,

size="1",

variant="classic",

color_scheme="tomato",

high_contrast=False,

radius="none",

), width="20rem")

size

variant

color_scheme

high_contrast

radius

Prop	Type	Description
`value`	`int`	The value of the progress bar: 0 to max (default 100).
`max`	`int`	The maximum progress value.
`size`	`"1""2""3"`	The size of the progress bar: "1" \| "2" \| "3".
`variant`	`"classic""surface""soft"`	The variant of the progress bar: "classic" \| "surface" \| "soft".
`color_scheme`	`"tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray"`	The color theme of the progress bar.
`high_contrast`	`bool`	Whether to render the progress bar with higher contrast color against background.
`radius`	`"none""small""medium""large""full"`	Override theme radius for progress bar: "none" \| "small" \| "medium" \| "large" \| "full".
`duration`	`str`	The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation.
`fill_color`	`str`	The color of the progress bar fill animation.