# Progress and meters The browser's own `` for work under way and `` for a measure within known limits - a quota, a score. The value is an attribute, the browser announces it, and a progress without a value says the work has no known end. ## Examples `progress` on a `` with `value` and `max`; the words of the value go beside the bar, `text-nowrap` so the bar gives way, and the label names it. ```html
40 % 40 %
``` ### Tones and sizes `progress-{tone}` for the tones, `progress-sm` and `progress-lg` for the height; `progress-striped` lays stripes on the bar, `progress-animated` moves them while motion is allowed. ```html ``` ### Meters `meter` on a ``: `low`, `high` and `optimum` divide the range, and the browser colours the value by the part it falls in - green in the good part, amber next to it, red in the far one. ```html
3.1 of 10 GB 3.1 of 10 GB
8 of 10 GB 9.6 of 10 GB ``` ### Hairlines `progress-xs`, 3 px, and `meter-xs`, 2 px, sit under a row's words without fighting them: how far a job is between its runs, amber when it is late, and how often it succeeded, colored by the meter's own parts. ```html
Nightly backup next in 2 h 98%
Mail queue late by 6 min 71%
``` ### Along the window's top `REDZ.ui.progress(promise)` shows a thin bar along the top of the window while a request runs, and answers the promise: it comes after 150 ms, so a quick answer shows nothing, then stays at least 400 ms, so it never flickers; however many requests run at once, there is one bar. It is `progress-top`, in the top layer, and readers do not hear it - what waits says so itself, a [busy](busy.md) region or button. Under reduced motion the bar stands still. ```html ``` ```js const rows = await REDZ.ui.progress(fetch('/bookings?page=2').then((answer) => answer.json())); ``` A product sets how much it shows in its tokens: `--redz-progress-top-size`, `--redz-progress-top-track` and `--redz-progress-top-glow`, a `box-shadow`. ## Keyboard and accessibility - Name every bar: a `