Progress

Progress bars using the native <progress> element with color variants.

Variants

65% 65%

100% 100%

45% 45%

20% 20%

<div class="nano-progress">
  <progress class="nano-progress__bar" value="65" max="100">65%</progress>
  <span class="nano-progress__label">65%</span>
</div>

<div class="nano-progress nano-progress--success">
  <progress class="nano-progress__bar" value="100" max="100">100%</progress>
  <span class="nano-progress__label">100%</span>
</div>

<div class="nano-progress nano-progress--warning">
  <progress class="nano-progress__bar" value="45" max="100">45%</progress>
  <span class="nano-progress__label">45%</span>
</div>

<div class="nano-progress nano-progress--destructive">
  <progress class="nano-progress__bar" value="20" max="100">20%</progress>
  <span class="nano-progress__label">20%</span>
</div>

Variants

nano-progress--success – green progress bar
nano-progress--warning – amber progress bar
nano-progress--destructive – red progress bar