components progress

components/progress

Import: import { Progress, Spinner } from "@tundralibs/ui/progress"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Progress

Progress(props: { value: number; max?: number; attrs?: Attrs }): Html

Spinner

Spinner(props = …: { label?: string; attrs?: Attrs }): Html

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

Storage used

Progress({ value: 7.2, max: 10, attrs: { "aria-label": "Storage used, 7.2 of 10 GB" } })

<progress class="progress" value="7.2" max="10" aria-label="Storage used, 7.2 of 10 GB"></progress>

Something is loading

Spinner({ label: "Loading invoices" })

<span class="spinner" role="status" aria-label="Loading invoices"></span>

CSS hooks

Classes defined by components/progress/progress.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.progress, .spinner