Progress

The native <progress> element, styled. Give it a visible label with <label for> or an aria-label. Without value it is indeterminate and animates; under reduced motion the animation stops.

CSS: css/components/progress.css (in ivolt.css).

A determinate barfixtures/progress/basic.htmlOpen alone

<div class="iv-stack iv-u-gap-5" style="max-width: 28rem">
  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-upload">Uploading assets — 72%</label>
    <progress class="iv-progress" id="pr-upload" value="72" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-small">Cache warm-up — 35% (small)</label>
    <progress class="iv-progress iv-progress--sm" id="pr-small" value="35" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-restore">Restoring the index — 96%</label>
    <progress class="iv-progress iv-progress--lg" id="pr-restore" value="96" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-indeterminate">Contacting the registry — progress unknown</label>
    <progress class="iv-progress" id="pr-indeterminate"></progress>
  </div>

  <p class="iv-u-m-0 iv-u-text-sm">
    The bar is cobalt by default: a progress bar reports how far along something
    is, not whether it went well. Each one keeps a visible label that states the
    value in words; the colour is never the only information. Without a
    <code>value</code> the bar is indeterminate, and under
    <code>prefers-reduced-motion</code> it stops moving and stays a full subtle
    track.
  </p>

  <h2 class="iv-u-text-lg iv-u-m-0">Semantic tones</h2>

  <p class="iv-u-m-0 iv-u-text-sm">
    One example each, for the cases where the bar really does carry a verdict.
  </p>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-tests">Tests passed — 148 of 152</label>
    <progress class="iv-progress iv-progress--success" id="pr-tests" value="148" max="152"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-storage">Storage used — 8.6 GB of 10 GB</label>
    <progress class="iv-progress iv-progress--warning" id="pr-storage" value="8.6" max="10"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-budget">CSS budget spent — 44.2 kB of 45 kB</label>
    <progress class="iv-progress iv-progress--danger" id="pr-budget" value="44.2" max="45"></progress>
  </div>
</div>

Sizes

Three thicknesses and one public local. iv-progress--sm is 0.25rem, the default 0.5rem and iv-progress--lg 1rem with a full radius; all three only set --iv-progress-size, so any other thickness is one declaration on the element. Added in v0.6, together with the rename: --iv-progress-size replaces the --iv-progress-height of v0.1 to v0.5.

Three sizes and a custom thicknessfixtures/progress/sizes.htmlOpen alone

<div class="iv-stack iv-u-gap-5" style="max-width: 28rem">
  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-size-sm">Cache warm-up — 35% (small)</label>
    <progress class="iv-progress iv-progress--sm" id="pr-size-sm" value="35" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-size-md">Uploading assets — 72% (default)</label>
    <progress class="iv-progress" id="pr-size-md" value="72" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-size-lg">Import finished — 100% (large)</label>
    <progress class="iv-progress iv-progress--lg iv-progress--success" id="pr-size-lg" value="100" max="100"></progress>
  </div>

  <div class="iv-stack iv-u-gap-2">
    <label class="iv-u-text-sm" for="pr-size-custom">Storage used — 8.6 GB of 10 GB (custom thickness)</label>
    <progress class="iv-progress iv-progress--warning" id="pr-size-custom" style="--iv-progress-size: 0.75rem" value="8.6" max="10"></progress>
  </div>

  <p class="iv-u-m-0 iv-u-text-sm">
    Three sizes plus the public local: <code>--iv-progress-size</code> is
    0.5rem by default, 0.25rem with <code>iv-progress--sm</code> and 1rem with
    <code>iv-progress--lg</code>. Every bar keeps a visible label that states
    the value in words.
  </p>
</div>

.iv-root {
  --iv-progress-size: 0.75rem;
}

Modifiers and locals

--sm and --lg for the thickness; --success --warning --danger for the bar colour. Public locals: --iv-progress-size (track thickness), --iv-progress-color (the bar), --iv-progress-track and --iv-progress-track-subtle (the groove behind it) and --iv-progress-groove (its inner shadow, drawn with --iv-color-hover-surface).

Common mistakes

A div with a background instead of the native element.
Progress without a label or without max.

Class index

Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.

Class	What it does
`iv-progress--success`	Success tone of the bar.
`iv-progress--warning`	Warning tone.
`iv-progress--danger`	Danger tone.

Every content component

Every interactive component

Navigate

Progress

Sizes

Modifiers and locals

Common mistakes

Class index