Progress Ring

A circular progress indicator — determinate or indeterminate, with an optional centre label, sizes and semantic colours.

Examples

progress-ring.html
html
1 <nana-progress-ring value="72" show-value></nana-progress-ring>
2 <nana-progress-ring indeterminate></nana-progress-ring>

Import

main.ts
ts
1 import "@nana-tec/ui-components/progress-ring";

Props

AttributeTypeDefault
valuenumber0
indeterminatebooleanfalse
show-valuebooleanfalse
sizesm | md | lgmd
colorprimary | success | warning | dangerprimary
labelstring