Monthly report
Revenue, signups, and churn for the last 30 days.
Progress
A progress with a value shows how far along a task is. Without a value, it shows a sliding bar.
Accessibility
Label the bar. The indeterminate bar pulses instead of sliding when motion is reduced.
Customize
The fill uses --m-primary.
Meter
A meter shows a measurement within a known range, such as disk usage.
Accessibility
Label the meter, and put the value in its text as a fallback. Color is the only cue for the range, so state anything important in words too.
Customize
The fill is green in the optimum range, amber when suboptimal, and red when even less good, as
set by low and high.
Busy
aria-busy="true" on text or a button shows an inline spinner while its content loads. On a
container, such as a section, article, form, list, or div,
it dims the content under a centered spinner.
Fetching the latest results
Accessibility
Screen readers wait until aria-busy is removed before announcing the region's changes. Dimming
doesn't stop clicks or Tab, so also add inert to a busy container while its content is stale.
Customize
The spinner follows the text color, and pulses instead of spinning when motion is reduced.