Turn Progress
Anatomy
A 2px full-width strip showing how far a turn has run. A single hard-edged two-stop gradient — accent from 0 to N%, then accent-10% for the remainder. No animation, no track chrome: it is a hair of colour at the top of the executing composer, not a widget.
maud_ui::primitives::turn_progress
Props
Generated from public Rust fields. Defaults are evaluated from the implementation.
| Prop | Type | Default | Description |
|---|---|---|---|
percent | u8 | 0 | Percent complete, 0–100. Clamped on render. |
Examples
Turn progress
A 2px hard-gradient strip — accent to N%, accent-10% after. Rendered above the executing composer.
Usage and composition
Import
use maud_ui::primitives::turn_progress::{self, Props};
Example
use maud_ui::primitives::turn_progress::{self, Props};
turn_progress::render(Props { percent: 34 })
How it works
The fill is carried by an inline --mui-turn-pct custom property, so the same class serves every fill and a consumer can animate it by writing the variable. The strip exposes role="progressbar" with aria-valuenow.
CSS classes
mui-turn-progress— the strip. Reads--mui-turn-pct(default0%).
Related
Progress, Meter, Composer (renders this above the executing field).
Accessibility
Supply meaningful labels, choose heading levels for the surrounding page, and preserve native link and form behavior. Keyboard focus follows document order. Motion honors reduced-motion preferences.