MenuCaderno UI
npmGitHub
Theme

<cad-progress>

Progress

Show how much of a task is complete, or indicate that work is still running.

Uploading file

Uploading file: 72%

States and sizes

Omit value when progress is unknown.

Success

Warning

Error

Indeterminate

Small · count

Sizes and values

Sizes are default, sm, and xs. Blue is standard progress; mint, amber, and red indicate success, warning, and error. Neutral is also available.

Omit value when progress is unknown. Use value-label for counts such as “34 of 50”; the same text is visible and accessible.

API reference: <cad-progress>

labellabelstring'Progress'maxmaxnumber100show-valueshowValuebooleanfalsesizesizeCadProgressSize'md'tonetoneCadProgressTone'blue'valuevaluenumber | undefinedundefinedvalue-labelvalueLabelstring''labelstringlabelnomaxnumbermaxyesshowValuebooleanshow-valueyessizeCadProgressSizesizeyestoneCadProgressTonetoneyesvaluenumber | undefinedvalueyesvalueLabelstringvalue-labelnofallbackReadable progress shown before the component upgrades.barNative progress element.baseProgress layout.labelVisible progress label.valueVisible percentage or count.--cad-progress-bgPer-instance track color.--cad-progress-fillPer-instance fill color.--cad-progress-inkPer-instance foreground color.

Accessibility

Uses native <progress>. Set value and max for measured progress. Omit value for ongoing work without a known percentage.

MIT licensed. Built with Caderno UI.Report an issue
Back to top