# Progress Ring

> Source: https://design.nanatec.co.ke/components/progress-ring/
> A circular progress indicator — determinate or indeterminate, with an optional centre label, sizes and semantic colours.

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

## Preview

```html
<nana-progress-ring value="60"></nana-progress-ring>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-progress-ring value="60"></nana-progress-ring>
```

## Examples

```html
<nana-progress-ring value="72" show-value></nana-progress-ring>
<nana-progress-ring value="45" color="success" show-value></nana-progress-ring>
<nana-progress-ring indeterminate></nana-progress-ring>
```

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | Centre label content (overrides `show-value`) |

## CSS Variables

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

## CSS Parts

| Part | Description |
|---|---|
| `ring` | The SVG wrapper |
| `indicator` | The progress arc |

## 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-ring--docs