Docs

Blog

Gallery

Resources

Learn

Components

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.

PropTypeDescriptionValues
cap_is_roundbool

If true, the cap of the progress indicator will be rounded.

is_indeterminatebool

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')

thicknessUnion

This defines the stroke width of the svg circle.

track_colorstr

The color name of the progress track. Use a color key in the theme object

valueint

Current progress (must be between min/max).

value_textstr

The desired valueText to use in place of the value.

colorstr

The color name of the progress bar

sizestr

The size of the circular progress

Event Triggers

No component specific event triggers

Label of CircularProcess.

Props

No component specific props

Event Triggers

No component specific event triggers

Did you find this useful?

HomeGalleryChangelogIntroductionHosting