Progress Bar

A linear progress indicator — determinate or indeterminate, with optional label, stripes, sizes and semantic colours.

Examples

progress-bar.html
html
1 <nana-progress-bar value="60" label="Uploading" show-value></nana-progress-bar>
2 <nana-progress-bar indeterminate></nana-progress-bar>
3 <nana-progress-bar value="70" striped color="success"></nana-progress-bar>

Import

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

Props

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