Progress

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

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

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.

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.

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.