Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Chakra

/

Feedback

/

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.

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

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

PropTypeDefault ValueValues
cap_is_round
bool
is_indeterminate
bool
max_
int
min_
int
thickness
Union[str, int]
track_color
str
value
int
value_text
str
color
str
size
str

Event Triggers

See the full list of default event triggers

Label of CircularProcess.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting