Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Feedback

/

Progress

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

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

A bar to display progress.

PropTypeDescriptionValues
has_stripebool

If true, the progress bar will show stripe

is_animatedbool

If true, and has_stripe is true, the stripes will be animated

is_indeterminatebool

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

valueUnion

The value of the progress indicator. If undefined the progress bar will be in indeterminate state

color_schemestr

The color scheme of the progress bar.

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting