c-progress
Use a progress bar when the size or duration of a task is known, and the reader benefits from seeing how far along it is. It sets expectations during a longer operation. When the duration is unknown, use a spinner instead.
max and value can be any pair of numbers. Use a percentage, such as max="100" value="30", or a count, such as the number of records loaded out of the total.
Where it exists
| axis | value |
|---|---|
| React module | none |
| React tier | none |
| CSS class | .c-progress |
| CSS files | progress.css |
| Storybook | none |
| Figma | not mapped |
| Uses in product | 3 |
| Uses in admin | 0 |
| Seen as | css-class-attribute |
| Join provenance | measured:css-declaration |
An empty cell above is a measurement, not an omission: every axis is printed whether or not it is populated. What each one costs is on /gaps.md, linked from the axis name wherever this page has a gap.
Members
A member is attached to its parent at module scope, so it is imported through the parent and versioned with it. Members have no page of their own: they declare no CSS class, carry no story and join no Figma set, and their uses are counted against the parent rather than separately.
None. Nothing is attached to this component as a member.