Ladder
An LED ladder for levels and load: green, then amber, then red, the way a recording level has always been read.
Kit part · Progress
Progress
Progress through a task: ink filling a groove, never a coloured bar.
- Element
- <div>
- Needs
- kit.css
- Rules
- meter.rules.md · 4
- Finishes
- Aluminium · Graphite · Porcelain · Black
- Volumes
- Tactile · Quiet
Variants
Exporting · 3 of 7
Every state, at once
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Empty | Under way | Done |
|---|---|---|---|
| Progress |
Graphite
| Part | Empty | Under way | Done |
|---|---|---|---|
| Progress |
API
| Name | Kind | Values | What it does |
|---|---|---|---|
| .tui-progress | class | 8px tall | A groove cut into the plate. |
| --v | CSS property | 0–1 · 0.4 | How full. Width eases over 300ms. |
| data-follow | attribute | — | For a value that moves all the time (a reading position, a scrub): the fill takes it at once instead of easing after it. |
| role="progressbar" · aria-valuenow | attribute | you add | So assistive tech reads the progress. |
Markup
<div class="tui-field">
<span class="tui-label" id="up">Upload · 64%</span>
<div class="tui-progress" style="--v:.64" role="progressbar"
aria-labelledby="up" aria-valuenow="64"></div>
</div>Needs kit.css only, no script. How to install the kit.
Accessibility
- Add
role="progressbar"andaria-valuenow(0–100), and print the figure in its label. - For work with no known length, use a blinking amber lamp with words: never a spinner.
How it’s built
The groove is the kit’s recess, shallow. The fill is an ::after in --tui-ink, sized by calc((100% - 4px) * var(--v)). Printing, not a colour.
Rules
meter.rules.mdIn the brain
The slot fills with ink, never colour.
4 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.
Related parts
Lamp
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
Preset saved.
Toast
A confirmation after an action: a small plate with a lamp and one factual sentence, read out politely, gone in 3.6 seconds.