Progress

Preview Code

375 768 Full

Open

html

<div class="aparte-progress" role="progressbar" aria-label="Uploading" 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>

.aparte-progress is the track and .aparte-progress__bar the part that fills, to a width you set. --indeterminate moves the bar across when you cannot say how far along the wait is. The context gauge is drawn with this recipe.

Customize

Variable	Default
--aparte-progress-indeterminate-width	40%
--aparte-progress-height	var(--aparte-space-2)
--aparte-progress-fill	var(--aparte-primary)

Classes

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

Accessibility

• The recipe paints; the meaning is yours to give. A bar with a value takes role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax, and a name saying what is progressing.
• The bar is drawn with a border, so it stays visible in forced-colours mode.

Related

• Spinner — the same wait, in a ring.
• Context gauge — a bar that measures the context window.