# Progress

> A thin progress bar in a semantic color. A native Pyzed component for Python desktop GUIs, with a live preview, code examples and its API.

Source: https://albakore.github.io/pyzed/library/progress/

:::tip[In plain words]
A bar that fills up to show how much of a task is done.
:::

A thin bar that fills from `0` to `max` (1.0 by default). `tint` changes its color and `height` its thickness.

`ui.progress` · Category: [Feedback](https://albakore.github.io/pyzed/library/#feedback) · [Full reference →](https://albakore.github.io/pyzed/reference/ui/#progress)

**Code:**

```python
pz.column([
    ui.progress(0.25),
    ui.progress(0.6, tint="success", height=6),
    ui.progress(37, max=40, tint="warning", height=8),
], spacing=18, width=360)
```

## When to use

- For work whose progress you can measure: downloads, builds, imports.
- When you can't measure it, show a [Spinner](https://albakore.github.io/pyzed/library/spinner/).

## Usage

```python
import pyzed as pz
from pyzed import ui

class Download(pz.App):
    def __init__(self):
        self.done, self.total = 0, 1

    def update(self, message):
        self.done, self.total = message  # posted from a worker thread with pz.post((done, total))

    def view(self):
        return ui.progress(self.done, max=self.total)
```

## Variants

:::note[About these captures]
Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site's theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open **Code** under a capture to see the snippet that draws it; free names such as `on_save` stand for your own callbacks.
:::

### Value

```python
ui.progress(0.1, width=240)
```

```python
ui.progress(0.5, width=240)
```

```python
ui.progress(1.0, width=240)
```

```python
ui.progress(37, max=40, width=240)
```

### Tint

```python
ui.progress(0.7, tint="success", width=240)
```

```python
ui.progress(0.7, tint="warning", width=240)
```

```python
ui.progress(0.7, tint="error", width=240)
```

### Thickness

```python
ui.progress(0.6, height=2, width=240)
```

```python
ui.progress(0.6, height=4, width=240)
```

```python
ui.progress(0.6, height=10, width=240)
```

### States and events

```python
pz.container(ui.progress(0.42, label="Downloading", show_value=True), width=300)
```

```python
pz.container(ui.progress(None, label="Indexing"), width=300)
```

### Base widget

The `pz.*` widget underneath: no theme, every color and size is yours.

```python
pz.progress_bar(64, max=100, width=240, height=12, accent="#c678dd", bg="#c678dd33", radius=6)
```

## Events

Progress has no events of its own: it shows what you give it. Like every widget it also has the **18 common events** (`click`, `double_click`, `right_click`, `mouse_enter`, `drag`, `key_down`, `resize`…), attached with `.on(...)`: see [Events](https://albakore.github.io/pyzed/guides/events/) and [Events of every component](https://albakore.github.io/pyzed/library/events/).

## Properties and API

### `ui.progress`

```python
progress(
    value,
    *,
    max=1.0,
    tint='accent',
    height=4,
    width='fill',
    label=None,
    show_value=False,
    theme=None,
)
```

A thin progress bar.

| Property | Default | Description |
| --- | --- | --- |
| `value` | *required* | Progress, or `None` for an indeterminate bar (keep a `pz.every(1/30, ...)` subscription while it shows). |
| `max` | `1.0` | Maximum value. |
| `tint` | `"accent"` | Semantic color: `"accent"`, `"error"`, `"warning"`, `"success"`, `"info"` or a token. |
| `height` | `4` | Thickness. |
| `width` | `"fill"` | Width: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion). |
| `label` | `None` | Text above the bar. |
| `show_value` | `False` | Adds the percentage at its right. |
| `theme` | `None` | Theme to use instead of the current one (`pyzed.theme.current()`). |

[Full reference →](https://albakore.github.io/pyzed/reference/ui/#progress)

### `pz.progress_bar`

```python
progress_bar(
    value,
    *,
    min=0.0,
    max=1.0,
    width=None,
    height=None,
    accent=None,
    bg=None,
    radius=2.0,
)
```

A progress bar.

| Property | Default | Description |
| --- | --- | --- |
| `value` | *required* | Current value. |
| `min` | `0.0` | Minimum. |
| `max` | `1.0` | Maximum. |
| `width` | `None` | Width: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion). |
| `height` | `None` | Height: pixels, `"fill"`, `"shrink"` or `"fill:N"` (proportion). |
| `accent` | `None` | Accent color (active part). |
| `bg` | `None` | Background color (`"#rrggbb[aa]"`, `(r, g, b[, a])` or `"transparent"`). |
| `radius` | `2.0` | Corner radius. |

[Full reference →](https://albakore.github.io/pyzed/reference/widgets/#progress_bar)

## Related

- [Spinner](https://albakore.github.io/pyzed/library/spinner/): A spinning arc for loading states.
- [Slider](https://albakore.github.io/pyzed/library/slider/): Pick a number in a range by dragging.
- [Stat](https://albakore.github.io/pyzed/library/stat/): A dashboard number with change and sparkline.