# Progress

A determinate bar, and the wait that has a bar but not yet a percentage.

```slint
import { Progress, ProgressLabel, ProgressValue } from "@glint/components/progress.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 400px;
                spacing: 8px;

                HorizontalLayout {
                    ProgressLabel { text: "Downloading update"; }
                    ProgressValue { percent: bar.percent; }
                }

                bar := Progress {
                    value: 65;
                }
            }
        }
    }
}
```

## Usage

```slint
import { Progress } from "@glint/components/progress.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component AppWindow inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        Progress {
            value: 40;
            minimum: 0;
            maximum: 100;
        }
    }
}
```

`Progress` communicates the completion status of a process. `ProgressLabel` and `ProgressValue` format the descriptive name and computed percentage alongside the bar.

## Examples

### Indeterminate

Set `indeterminate: true` when the progress is ongoing but total duration or percentage is unknown.

```slint
import { Progress, ProgressLabel } from "@glint/components/progress.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 400px;
                spacing: 8px;

                ProgressLabel {
                    text: "Preparing asset bundle...";
                }

                Progress {
                    indeterminate: true;
                }
            }
        }
    }
}
```

### Custom ranges

Provide domain-specific numbers using `minimum` and `maximum`. The bar computes `percent` automatically.

```slint
import { Progress, ProgressLabel, ProgressValue } from "@glint/components/progress.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 200px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 400px;
                spacing: 8px;

                HorizontalLayout {
                    ProgressLabel { text: "Tasks completed"; }
                    ProgressValue { percent: bar.percent; }
                }

                bar := Progress {
                    minimum: 0;
                    maximum: 12;
                    value: 9;
                }
            }
        }
    }
}
```

## API Reference

### Properties

| Property        | Type          | Default    | Description                                                                                                                                                                                                                                                              |
| --------------- | ------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `value`         | `in float`    | `0`        | Current value, in whatever units `minimum`…`maximum` names. Ignored while `indeterminate`.                                                                                                                                                                               |
| `minimum`       | `in float`    | `0`        | The range `value` lives in. Raw domain numbers bind straight in — three steps of seven is `minimum: 0; maximum: 7; value: 3`, published as such, which is what assistive technology reads out as "3 of 7". The 0–100 default keeps a percentage a percentage.            |
| `maximum`       | `in float`    | `100`      |                                                                                                                                                                                                                                                                          |
| `indeterminate` | `in bool`     | `false`    | The work has started but its size is unknown: the fill gives way to a sweeping band and the control reports no value.                                                                                                                                                    |
| `period`        | `in duration` | `1.4s`     | Time for one sweep of the band across the track.                                                                                                                                                                                                                         |
| `phase`         | `out float`   | no default | Where the band sits: 0 with its trailing edge at the left of the track, 1 with its leading edge past the right. Public for the same reasons Spinner's `rotation` is — a host can drive matching motion from the same phase, and a test can watch the band actually move. |
| `percent`       | `out float`   | no default | How far along that is as a fraction of the track, 0–100. Public because the track's own units are the consumer's: this is the number `ProgressValue` rounds, and the one a host drives a matching bar from.                                                              |

### ProgressLabel

The caption beside a bar: what the work is. It carries the library’s own type treatment, so a column of bars reads as one set rather than as whatever each call site reached for.

`ProgressLabel` publishes no properties, callbacks or functions of its own. What a call site can set on it is the Slint `Text` it inherits.

### ProgressValue

The readout on the other side: how far along, as a whole percent. It takes the fraction rather than the raw value, because the bar is what knows the range — and it rounds once, here, instead of at every call site.

### Properties

| Property  | Type       | Default    | Description                                                      |
| --------- | ---------- | ---------- | ---------------------------------------------------------------- |
| `percent` | `in float` | no default | How far along the bar is, 0–100. Bind it to the bar's `percent`. |

## Accessibility

- **Progress indicator role.** Progress declares `accessible-role: progress-indicator`.
- **Value bounds.** Publishes `accessible-value`, `accessible-value-minimum`, and `accessible-value-maximum`.
- **Indeterminate state.** In indeterminate mode, `accessible-value` is set to an empty string per ADR-0013 to signal an unknown percentage to assistive technology.