gog-progressbar

Progress Bar

A horizontal progress indicator in three modes — determinate, indeterminate and buffer — five sizes and the library's semantic color set.

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

Modes

determinate reflects value. indeterminate is work of unknown length. buffer draws a second, lighter level ahead of the fill — a streaming or preload position.

determinate

indeterminate

buffer

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

Variants

accent is the default — progress is usually just "the app is working", which is not one of the four status hues.

accent

success

danger

warning

info

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

Sizes

Five thickness steps, from a hairline to a chunky bar.

xsm

slg

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

Showing the value, and clamping

showValue renders the rounded percentage beside the bar. Push the value past either end below: it is clamped to 0–100 rather than trusted, so a bar driven straight from loaded / total cannot break the layout when the last chunk overshoots.

42%

value = 42

<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.

API Reference

Inputs

Name	Type	Default	Description
`value`	`number`	`0`	Percentage complete, 0–100. Clamped rather than trusted — a bar driven from loaded / total overshoots on the last chunk often enough to be worth handling here. Ignored in indeterminate mode.
`buffer`	`number`	`0`	Secondary level shown behind value in buffer mode — preloaded but not yet played. Also clamped to 0–100.
`mode`	`'determinate' \| 'indeterminate' \| 'buffer'`	`'determinate'`	determinate reflects value; indeterminate is work of unknown length; buffer adds a second, lighter level ahead of the fill.
`variant`	`'accent' \| 'success' \| 'danger' \| 'warning' \| 'info'`	`'accent'`	Fill color. Wider than the tag palette by one: progress is usually just "the app is working", which is the accent color rather than any status hue.
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`'md'`	Bar thickness.
`showValue`	`boolean`	`false`	Renders the rounded percentage next to the bar. Off by default — most bars sit under a label that already says what is happening.
`ariaLabel`	`string`	`''`	Accessible name for the bar.

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.

Token	Description
`--gog-progressbar-accent-bg / -success-bg / -danger-bg / -warning-bg / -info-bg`	Fill color per variant.
`--gog-progressbar-{variant}-buffer-bg`	The lighter buffer level shown ahead of the fill in "buffer" mode.
`--gog-progressbar-track-base-bg / -radius`	The unfilled track.
`--gog-progressbar-{size}-height`	Bar thickness, per size step (xsm/sm/md/lg/slg).
`--gog-progressbar-indeterminate-duration / -indeterminate-easing`	Indeterminate animation timing. Replaced by a static stripe under prefers-reduced-motion.
`--gog-progressbar-stripe-color / -stripe-size`	The static stripe that stands in for the animation when motion is reduced.
`--gog-progressbar-value-color / -value-font-size / -value-min-width / -value-gap`	The percentage readout rendered when showValue is on.