Examples

Each one is the library drawing it. Press, type and hover.

Progress2 / 4

row(vec![
    Button::new(format!("feedback-progress={}", (percent + 85) % 100), "Back", palette)
        .variant(ButtonVariant::Outline)
        .render(),
    Button::new(format!("feedback-progress={}", (percent + 15).min(100)), "Forward", palette)
        .variant(ButtonVariant::Outline)
        .render(),
])

Progress3 / 4

CodeSource

Progress::new(1.0, palette)
    .id("feedback-progress-done")
    .width(width.min(336.0))
    .height(8.0)
    .render()
    .accessibility_label("Download")

Progress4 / 4

CodeSource

Progress::new(progress, palette)
    .id("feedback-progress-flat")
    .width(width.min(336.0))
    .flat()
    .render()
    .accessibility_label("Disk space used")

Progress

A thin bar for work whose completed share is known. For work of unknown duration use a Spinner.

Import

use limn::{Component, Progress};

Usage

The host owns the value and passes it on every rebuild, as a fraction from 0 to 1. Values outside are clamped and NaN is empty.

fn view(state: &State, palette: ComponentPalette) -> Element {
    Progress::new(state.uploaded, palette).width(336.0).render()
}

The fill is palette.text and the rest of the track palette.selected. Without a width the bar fills the available horizontal space. It is passive and reports nothing.

Height

Progress::new(1.0, palette).height(8.0).render()

The bar is 4 px high unless set, and never thinner than 1 px. Its ends are rounded to half its height; the fill ends flat against the remaining track until it is complete.

Flat

let status = ComponentPalette { text: warning, ..palette };
Progress::new(state.quota, status).flat().render()

flat gives the bar square ends, as two pieces side by side: the meter of a dense list, where a rounded cap would read as a control. The colors come from the palette, so name a status color as its text.

Motion

A value that changes is not animated: the fill jumps to the new fraction.

Accessibility

With an id the bar is a progress indicator the platform knows by that ID, with its fraction as the value. It shows no text, so the host names what it renders. Without an id the platform is told nothing.

Progress::new(state.uploaded, palette)
    .id("upload")
    .render()
    .accessibility_label("Uploading")

API reference

The guide covers composition, options and actions. Generate the complete Rust type and builder reference from the checkout:

cargo doc -p limn --open

Component API overview · State and actions

Preview