Progress Bar

Overview

Import the component and drop it into a template.

import { ProgressbarComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [ProgressbarComponent],
})

Basic usage:

<gog-progressbar [value]="42" ariaLabel="Upload progress" />

Examples

<gog-progressbar [value]="42" ariaLabel="Upload" />
<gog-progressbar mode="indeterminate" ariaLabel="Loading" />
<gog-progressbar mode="buffer" [value]="42" [buffer]="70" ariaLabel="Playback" />

@for (variantOption of variants; track variantOption) {
  <gog-progressbar [variant]="variantOption" [value]="65" [ariaLabel]="variantOption" />
}

@for (sizeOption of sizes; track sizeOption) {
  <gog-progressbar [size]="sizeOption" [value]="65" [ariaLabel]="sizeOption" />
}

<gog-progressbar [value]="uploaded()" [showValue]="true" ariaLabel="Upload progress" />

Accessibility

The host carries role="progressbar" with aria-valuemin / aria-valuemax and, in determinate and buffer mode, aria-valuenow plus a readable aria-valuetext.

In indeterminate mode it reports noaria-valuenow at all — that omission is precisely what marks it indeterminate. Reporting 0 instead would announce "0 percent" forever. Its animation is also replaced by a static stripe under prefers-reduced-motion.

The fill's leading edge is marked by two hairlines, since 21.10.0. With showValue off — the default — that boundary is the only thing stating the value, and WCAG 1.4.11 asks 3:1 of the part of a graphic that carries its meaning. Fill against track could not carry it: 51 of the 55 shipped fill/track combinations were below 3:1, because the five fills straddle mid-luminance and no single track colour clears all of them in any theme but primeng. One marker tone does not work either, so there are two — the theme's ink outermost against the track, the surface colour just inside the fill — and whichever tone a fill sits close to, the other one reads. Worst case across the eleven themes is 3.25:1. The tones are --gog-progressbar-edge-color / -edge-backing-color, each --gog-progressbar-edge-width wide, and they flip end under dir="rtl".

Since 21.13.0 the buffer level ends with the same pair. Its boundary against the track was under 3:1 in every shipped theme and variant — 1.06:1 at worst — so in buffer mode you could not locate where the buffered region stopped. The same two tokens draw it, and nothing new needs overriding.

API Reference

Inputs

Styling Tokens

Every CSS custom property the progress bar paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.