Examples

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

Loading2 / 3

row(vec![
    Skeleton::circle("feedback-skeleton-avatar", palette, 40.0).render(),
    Element::column(vec![
        Skeleton::line("feedback-skeleton-title", palette, 180.0).render(),
        Skeleton::line("feedback-skeleton-text", palette, 260.0).render(),
    ])
    .gap(8.0),
])

Loading3 / 3

CodeSource

Element::panel(
    SkeletonGroup::rows("feedback-skeleton-rows", palette, 4).icon(true).render(),
)
.size(Some(width.min(336.0)), None)

Spinner

A rotating indicator for work of unknown duration. When the completed share is known, use Progress.

Import

use limn::{Component, Spinner, SpinnerVariant};

Usage

A spinner needs an ID and a color. Reuse the ID while rebuilding the tree, so the rotation does not restart.

fn view(palette: ComponentPalette) -> Element {
    Spinner::new("search-progress", palette.text).render()
}

It is passive: it takes no pointer or focus and reports nothing.

Size

Spinner::new("search-progress", palette.text).size(24.0).render()

The spinner is a square of 16 px unless set, and never smaller than 8 px.

Variants

Spinner::new("loading", palette.text)
    .variant(SpinnerVariant::Spokes)
    .render()

Circle, the default, is an incomplete circular stroke. Spokes is eight short radial strokes.

Motion

The rotation is continuous, not a transition, and keeps the tree animating while the spinner is in it. With reduced motion it holds still. See Animation for how the host keeps the window painting.

Accessibility

The platform is told of a progress indicator without a value, known by the spinner’s ID. It has no name unless the host gives one to what it renders.

Spinner::new("search-progress", palette.muted)
    .render()
    .accessibility_label("Searching")

Inside a control that already says it is busy, or beside a text that does, that node would be one more thing without a name. decorative leaves it out:

Spinner::new("row-busy", palette.muted).decorative().render()

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