Progress, Spinner

Determinate, indeterminate, busy

<div class="dsgn-stack" style="max-inline-size: 24rem">
  <div class="dsgn-field"><span class="dsgn-label" id="dx-up">Uploading invoice.pdf</span><progress class="dsgn-progress" aria-labelledby="dx-up" value="64" max="100">64 %</progress><p class="dsgn-hint">3.2 of 5 MB</p></div>
  <div class="dsgn-field"><span class="dsgn-label" id="dx-ld">Loading clients</span><progress class="dsgn-progress" aria-labelledby="dx-ld"></progress></div>
  <div class="dsgn-cluster"><button class="dsgn-button" aria-busy="true"><span class="dsgn-spinner" aria-hidden="true"></span>Saving…</button><span class="dsgn-spinner" role="status" aria-label="Loading"></span></div>
</div>

Usage

In a Field: <div class="dsgn-field"><label class="dsgn-label" id="up-label">Uploading</label>

Native <progress>, so screen readers get the value for free. Bar = space-4 tall, corners follow radius-s. data-intent: accent (default) | success | warning | danger. The indicator is ≥ 3:1 against the track and the surface in every theme.

Spinner: <span class="dsgn-spinner" role="status" aria-label="Loading"></span> Size = 1 line-height of its context, stroke = space-2, colour = currentColor. Busy button: <button class="dsgn-button" aria-busy="true">

It keeps its colours (it is working, not unavailable) and ignores pointer input; the app should also ignore repeat submits while busy.

Details

Classes

.dsgn-progress .dsgn-spinner .dsgn-button .dsgn-icon-button .dsgn-icon

Tokens used

--dsgn-control-solid --dsgn-danger-solid --dsgn-duration --dsgn-ease --dsgn-neutral-subtle --dsgn-radius-full --dsgn-radius-s --dsgn-space-2 --dsgn-space-4 --dsgn-success-solid --dsgn-warning-solid

In Figma

Progress · Spinner

Import alone

dsgn.systems/components/progress.css