# Radial progress · MIAN

Circular progress with a centred value.

- Id: `radial-progress` · Category: Feedback · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/radial-progress
- Use for: circular progress, score ring, percentage circle, goal progress.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-radial`: Set aria-valuenow (0–100); mian.js paints it.
- `mn-radial-sm · mn-radial-lg`: Sizes.

## Accessibility

- Same semantics as the linear bar: role="progressbar", aria-valuenow, a name.

## Examples

### Sizes and colours

```html
<div class="mn-radial mn-radial-sm" role="progressbar" aria-label="Tasks" aria-valuenow="25"><span>25%</span></div>
<div class="mn-radial mn-success" role="progressbar" aria-label="Goal" aria-valuenow="70"><span>70%</span></div>
<div class="mn-radial mn-radial-lg mn-accent" role="progressbar" aria-label="Score" aria-valuenow="92"><span>92</span></div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/radial-progress/source