Components · card 3 of 3

Rule & progress — the gradient line

Carried forward from the brand repository’s previously published docs site, where it sat under the masthead as .rule. It is the one element the old site had that this package did not, so it is restored here as a real component rather than a page-local style. This is also the only place --gradient-brand is permitted as a field rather than as display type.

The static rule

A 4px pill running #5F20FE to #E8E6F0 left to right, capped at 320px. It carries no value and reports no state — it is a masthead accent, and the gradient is doing the same job it does in display type: resolving violet into the near-white brand-25 tint. Use <hr class="rule"> so it is a separator in the accessibility tree, not an empty div.

.rule height 4px · radius-pill · gradient-brand · max 320px

Determinate progress

The same line with a track behind it. The fill width comes from a --progress custom property, and the gradient is painted at the track’s full width and then revealed — so the violet end stays anchored at 0% and the near-white end always means finished. Width transitions on --transition-slow (500ms), matching the system’s slow-and-continuous motion rule.

15%

40%

72%

100%

Give the track the ARIA role so the value is announced — the element is decorative markup, not a native <progress>:

role="progressbar" · aria-valuenow="72"

Indeterminate

A 40% band sweeping the track, for work with no measurable end. Prefer the determinate bar whenever a percentage exists. Under prefers-reduced-motion the sweep would otherwise freeze off-screen — the global collapse in colors_and_type.css pins every animation to 0.01ms — so the variant falls back to a filled track at 0.6 opacity.

.progress.is-indeterminate

Three ways to break it

Each pair shows the shipped element beside the mistake. None of the right-hand versions may ship.

Capped at 320px what ships

✓ violet reads as brand

Stretched full width max-width removed

× the gradient flattens into a pale wash

Gradient sized to the track what ships — 15%

✓ early progress is violet

Gradient sized to the fill background-size: 100% — 15%

× near-white at 15% reads as done

4px what ships

✓ a line, not a surface

16px thickened

× now a violet field — violet is rationed

Markup

<hr class="rule">

<div class="progress" role="progressbar"
     aria-valuenow="72" aria-valuemin="0" aria-valuemax="100">
  <span class="progress-value" style="--progress:72%"></span>
</div>

<div class="progress is-indeterminate">
  <span class="progress-value"></span>
</div>

If the track is not 320px wide, tell the fill so the gradient still resolves at the right point: style="--progress:72%; --progress-track-width:480px".