Radial progress
Circular progress with a centred value.
Sizes and colours
25%
70%
92
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/radial-progress.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.