Progress

catnip-progress shows determinate completion from 0% to 100%. Use it for a measurable upload or processing operation, or to summarize progress through a multi-step flow.

The component owns the progress semantics, normalization, track, fill, label row, percentage, size, and intent treatment. The consumer owns the operation state and the words that explain it.

Size M uses text-m, a 20px intent icon, and a 4px track. Size L uses text-l, a 24px intent icon, and an 8px track.

Live example

Main use cases

Operation or flow progress

Use the complete component when the progress indicator needs its own visible description:

<catnip-progress progress="50" label="Uploading document..." aria-label="Document upload progress"></catnip-progress>

For a form or flow, keep the numeric value proportional to the whole flow and use ariaValueText when a step description is more useful than a percentage:

<catnip-progress progress="50" label="Account setup" aria-value-text="Step 2 of 4 complete"></catnip-progress>

File Item composition

catnip-file-item composes catnip-progress internally for its bottom upload bar. File Item continues to own the file name, visible percentage, upload status, and actions; Progress owns the reusable bar and accessible progress semantics. File Item sets showZeroIndicator to false so a 0% upload shows an empty track rather than the standalone zero marker.

For a standalone bar-only presentation, set hideLabel. The label still provides the accessible name even though its visual row is hidden:

<catnip-progress progress="25" hide-label label="Passport upload progress"></catnip-progress>

Accessibility

• The component uses a native <progress> element with a fixed range of 0–100. The visual label row, percentage, and custom bar are hidden from the accessibility tree so they do not duplicate that widget.
• ariaLabel overrides the accessible name. Otherwise the component uses label, then bundled progress.label (Loading data...). App-wide language goes through registerTranslate.
• Use ariaValueText when the numeric percentage is not the clearest description, such as Step 2 of 4 complete.
• intent does not announce success, warning, or danger by itself. Make that state explicit in the visible label or surrounding status/error message; do not rely on colour or an icon alone.
• Avoid adding a live region that announces every percentage update. Announce meaningful milestones and final success or failure in the surrounding application when needed.