Progress
Bar plus a mono count for long operations.
<mm-progress label="Cataloguing assets" value="412" max="1280" unit="assets"></mm-progress>
Guidance
Progress shows how far a long operation has got: a 4px bar on mm-sunken filled in
mm-text-2, and a real count ("412 / 1,280 assets") or a percentage in the text face with
tabular figures. The bar is never burnt sienna. Prefer counts for long operations: a number people can check beats an
open-ended animation. indeterminate exists for the moments you genuinely cannot count.
The bar is a progressbar named by label, with aria-valuetext matching the readout.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | number | 0 | Current value. |
max | max | number | 100 | Maximum value, e.g. the total asset count. |
label | label | string | '' | What is progressing, e.g. "Cataloguing assets". Names the progressbar; shown unless hide-label. |
hideLabel | hide-label | boolean | false | Visually hide the label (it still names the bar). |
unit | unit | string | '' | Unit for the count readout, e.g. "assets". Plural is your job. |
readout | readout | 'count' | 'percent' | 'none' | 'count' | count ("412 / 1,280 assets", default), percent ("32%") or none. |
readoutPosition | readout-position | 'inline' | 'below' | 'inline' | inline (default, opposite the label) or below the bar, centred, as in the loading state. |
indeterminate | indeterminate | boolean | false | No known total. Prefer counts for anything long. |
locale | locale | string | 'en-GB' | Locale for number formatting. |
CSS parts
| Part | Description |
|---|---|
label | The visible label. |
readout | The count or percentage (text face, tabular figures). |
track | The bar track (the progressbar). |
fill | The bar fill. |
CSS custom properties
| Property | Description |
|---|---|
--mm-progress-width | Width of the element. Defaults to 100% of its container. |
Examples
Every state of mm-progress in Storybook, with keyboard and screen reader tests.