> For AI agents: the complete documentation index is at [llms.txt](https://reflex.dev/docs/llms.txt). Markdown versions are available by appending `.md` or sending `Accept: text/markdown`.

---
components:
  - rx.progress

Progress: |
  lambda **props: rx.box(rx.progress(value=50, **props), width="20rem")
---

# Progress

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

```python exec
import reflex as rx
```

## Basic Example

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

```python demo
rx.vstack(
    rx.progress(value=0),
    rx.progress(value=50),
    rx.progress(value=100),
    width="50%",
)
```

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

```python demo exec
import asyncio


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

    @rx.event(background=True)
    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="50%",
    )
```

## API Reference

### rx.progress

A progress bar component.

#### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | int | - | The value of the progress bar: 0 to max (default 100). |
| `max` | int | - | The maximum progress value. |
| `size` | Literal["1", "2", "3"], Breakpoints[str, Literal["1", "2", "3"]] | - | The size of the progress bar: "1", "2", "3". |
| `variant` | Literal["classic", "surface", "soft"] | - | The variant of the progress bar: "classic", "surface", "soft". |
| `color_scheme` | Literal["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` | Literal["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. |

#### Event Triggers

Base event triggers: https://reflex.dev/docs/api-reference/event-triggers/