Skip to content

role progressbar

Progress bar draft v0.1.0

Shows how far a task has progressed, or that it is in progress when its length is unknown.

A progress bar fills a track from start to end as a task advances: an upload, an export, the steps of a setup. It has a visible label naming the task and, when the progress can be measured, an optional value in percent. When the length is unknown, the bar is indeterminate: a segment moves along the track to say that something is happening. It only reports: a progress bar is never a control.

States matrix

Every option of each styling property against every declared state, per part when states belong to parts. Properties whose options combine in one component token path are crossed: one table per combination of the others. States are forced with data-state, so what you see is exactly what the CSS defines, independent of the pointer. A column header names the inputs or platforms a state belongs to; states without a web rendering are listed under the table.

By size

Size defaultindeterminate
small
40%
40%
medium
40%
40%