Reflex Logo

Intro

Gallery

Hosting

Components

New

Learn

Components

API Reference

Onboarding

Library

/

Datadisplay

/

Progress

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

rx.progress expects the value prop to set the progress value.

rx.vstack(
    rx.progress(value=0),
    rx.progress(value=50),
    rx.progress(value=100),
    gap="1em",
    min_width=["10em", "20em"],
)

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

import asyncio


class ProgressState(rx.State):
    value: int = 0

    @rx.background
    async def start_progress(self):
        async with self:
            self.value = 0
        while self.value < 100:
            await asyncio.sleep(0.1)
            async with self:
                self.value += 1


def live_progress():
    return rx.hstack(
        rx.progress(value=ProgressState.value),
        rx.button(
            "Start", on_click=ProgressState.start_progress
        ),
        width="10em",
    )

The high-level Progress component.

PropTypeDescriptionValues
color_schemeLiteral

Override theme color for progress bar indicator

valueOptional

The current progress value.

maxOptional

The maximum progress value.

radiusLiteral

Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

The Progress Root component.

PropTypeDescriptionValues
radiusLiteral

Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

The Progress bar indicator.

PropTypeDescriptionValues
valueOptional

The current progress value.

maxOptional

The maximum progress value.

color_schemeLiteral

The color scheme of the progress indicator.

as_childbool

Change the default rendered element for the one passed as a child.

Event Triggers

No component specific event triggers

← ListScrollArea →

Did you find this useful?