Feedback & Status
Progress Bar
A linear progress indicator — determinate or indeterminate, with optional label, stripes, sizes and semantic colours.
Preview
Section titled “Preview”<nana-progress-bar value="60" style="width: 100%"></nana-progress-bar>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/progress-bar";Basic usage
Section titled “Basic usage”<nana-progress-bar value="60" style="width:100%"></nana-progress-bar>Examples
Section titled “Examples”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 | color | ProgressColor | 'primary' | Semantic colour |
indeterminate | indeterminate | boolean | false | Unknown duration — animates continuously |
label | label | string | undefined | — | Optional label shown above the bar |
labelHidden | label-hidden | boolean | false | Keep the label for assistive technology but not on screen — for a bar that already sits under a heading of its own, where painting the label again would just repeat it. |
showValue | show-value | boolean | false | Show the percentage next to the label |
size | size | ProgressSize | 'md' | Bar height |
striped | striped | boolean | false | Animated diagonal stripes |
value | 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) |
CSS Variables
Section titled “CSS Variables”| Variable | Description |
|---|---|
--nana-progress-color | Fill colour (overrides the color attribute) |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
track | The background track |
fill | The filled portion |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Progress Bar interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook