# Progress Bar

> Source: https://design.nanatec.co.ke/components/progress-bar/
> A linear progress indicator — determinate or indeterminate, with optional label, stripes, sizes and semantic colours.

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

## Preview

```html
<nana-progress-bar value="60" style="width:100%"></nana-progress-bar>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/progress-bar";
```

## Basic usage

```html
<nana-progress-bar value="60" style="width:100%"></nana-progress-bar>
```

## Examples

`label` + `show-value` add context, `striped` + `color` restyle it, and
`indeterminate` shows an unbounded loop.

```html
<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>
```

## API

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-progress-color` | — | Fill colour (overrides the `color` attribute) |

## CSS Parts

| Part | Description |
|---|---|
| `track` | The background track |
| `fill` | The filled portion |

## Related components

<ul class="related not-content">
  <li><a href="/components/alert/">Alert</a></li>
  <li><a href="/components/badge/">Badge</a></li>
  <li><a href="/components/skeleton/">Skeleton</a></li>
  <li><a href="/components/tag/">Tag</a></li>
  <li><a href="/components/spinner/">Spinner</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-progress-bar--docs