A linear progress indicator — determinate or indeterminate, with optional label, stripes, sizes and semantic colours.
<nana-progress-bar value="60" style="width:100%"></nana-progress-bar>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/progress-bar";
<nana-progress-bar value="60" style="width:100%"></nana-progress-bar>
label + show-value add context, striped + color restyle it, and
indeterminate shows an unbounded loop.
<nana-progress-bar value="60" label="Uploading" show-value style="width:100%"></nana-progress-bar>
<nana-progress-bar value="70" striped color="success" style="width:100%"></nana-progress-bar>
<nana-progress-bar indeterminate style="width:100%"></nana-progress-bar>
Properties
| Property | Attribute | Type | Default | Description |
|---|
color | — | ProgressColor | 'primary' | Semantic colour |
indeterminate | — | boolean | false | Unknown duration — animates continuously |
label | — | string | undefined | — | Optional label shown above the bar |
showValue | show-value | boolean | false | Show the percentage next to the label |
size | — | ProgressSize | 'md' | Bar height |
striped | — | boolean | false | Animated diagonal stripes |
value | — | number | 0 | Progress value, 0–100 |
CSS parts
| Part | Description |
|---|
::part(track) | The background track |
::part(fill) | The filled portion |
CSS custom properties
| Property | Description |
|---|
--nana-progress-color | Fill colour (overrides the `color` attribute) |
| Variable | Default | Description |
|---|
--nana-progress-color | — | Fill colour (overrides the color attribute) |
| Part | Description |
|---|
track | The background track |
fill | The filled portion |
Explore Progress Bar interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
