Progress Bar — Vanilla

Progress bar with vanilla HTML. Same BEM and options as Astro/Svelte. Ensure Rizzo CSS is loaded.

Progress Bar

An accessible progress bar for completion or loading state. Same structure as Astro and Svelte. BEM: progress, progress__track, progress__bar, progress__label. Modifiers: progress--sm | progress--md | progress--lg, progress--primary | success | warning | error | info, progress--indeterminate.

Basic usage

Live example

HTML

html html 
<div class="progress progress--md progress--primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress__track">
    <div class="progress__bar" style="width: 60%"></div>
  </div>
</div>

With label

Add progress__label with aria-hidden="true" for the percentage.

Live example
html html 
<div class="progress progress--md progress--primary" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress__track">
    <div class="progress__bar" style="width: 75%"></div>
  </div>
  <span class="progress__label" aria-hidden="true">75%</span>
</div>

Variants

Live example
html html 
<!-- primary, success, warning, error, info -->
<div class="progress progress--md progress--primary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  <div class="progress__track"><div class="progress__bar" style="width: 40%"></div></div>
</div>
<div class="progress progress--md progress--success" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100">
  <div class="progress__track"><div class="progress__bar" style="width: 55%"></div></div>
</div>
<div class="progress progress--md progress--warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
  <div class="progress__track"><div class="progress__bar" style="width: 70%"></div></div>
</div>

Sizes

Live example
html html 
<!-- progress--sm, progress--md, progress--lg -->
<div class="progress progress--sm progress--primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress__track"><div class="progress__bar" style="width: 50%"></div></div>
</div>
<div class="progress progress--md progress--primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress__track"><div class="progress__bar" style="width: 50%"></div></div>
</div>
<div class="progress progress--lg progress--primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress__track"><div class="progress__bar" style="width: 50%"></div></div>
</div>

Indeterminate

Use progress--indeterminate and omit aria-valuenow; set aria-label and aria-valuetext="Loading".

Live example
html html 
<div class="progress progress--md progress--primary progress--indeterminate" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-label="Loading" aria-valuetext="Loading">
  <div class="progress__track">
    <div class="progress__bar"></div>
  </div>
</div>

Custom max

Use aria-valuenow and aria-valuemax (e.g. 3 of 5 steps). Bar width = (value / max) * 100%.

Live example (3 of 5 steps)
html html 
<!-- e.g. 3 of 5 steps: value 3, max 5 → 60% -->
<div class="progress progress--md progress--primary" role="progressbar" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5">
  <div class="progress__track">
    <div class="progress__bar" style="width: 60%"></div>
  </div>
  <span class="progress__label" aria-hidden="true">60%</span>
</div>

Features

  • Semantic - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
  • Indeterminate - aria-valuetext="Loading" when progress is unknown
  • Variants - primary, success, warning, error, info
  • Sizes - sm, md, lg
  • Reduced motion - Indeterminate animation disabled when user prefers reduced motion

Astro / Svelte: Astro · Svelte