Progress

Width 375 768 Full Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<div class="aparte-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
     style="--aparte-progress-value: 60">
  <div class="aparte-progress__bar"></div>
</div>
<div class="aparte-progress aparte-progress--indeterminate" role="progressbar" aria-label="Working">
  <div class="aparte-progress__bar"></div>
</div>

Determinate bar + indeterminate variant

The consumer owns the ARIA: role=“progressbar” plus aria-valuenow/min/max on the determinate form, and aria-valuetext (or nothing, per platform convention) on the indeterminate one — this file only paints what those attributes mean.

Classes

.aparte-progress · .aparte-progress--indeterminate · .aparte-progress__bar

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.