Spinner

Sizes

Five size steps, from xsm to slg.

@for (sizeOption of sizes; track sizeOption) {
  <gog-spinner [size]="sizeOption" [ariaLabel]="'Loading ' + sizeOption" />
}

Variants

Two built-in animations ship with gog-spinner — pick one via variant. runic is the original branded spin-and-glow; ring is a plain tapered ring for a more neutral look.

@for (variantOption of variants; track variantOption) {
  <gog-spinner [variant]="variantOption" size="lg" [ariaLabel]="'Loading, ' + variantOption + ' variant'" />
}

Animation speed

--gog-spinner-spin-duration (and -pulse-duration for the rune glow) retime the built-in animations per instance, without swapping variant — useful to signal urgency, or just to match a surrounding motion rhythm.

<gog-spinner size="lg" style="--gog-spinner-spin-duration: 2.4s" ariaLabel="Loading, slow" />
<gog-spinner size="lg" style="--gog-spinner-spin-duration: 0.5s" ariaLabel="Loading, fast" />

Custom variant

Need an animation entirely of your own? variant="custom" projects any markup — it inherits the size wrapper and overlay behavior, and picks up --gog-spinner-color like the built-in presets, but the motion is yours.

<gog-spinner variant="custom" size="lg" ariaLabel="Loading, custom variant">
  <div class="dots-loader">
    <span></span><span></span><span></span>
  </div>
</gog-spinner>

The app’s own indicator, everywhere at once

variant="custom" above restyles one spinner. Most of the spinners an app shows are not ones it writes: gog-button draws one while loading, gog-autocomplete while it searches, and gog-table in place of its rows — none of them take a spinner input. GOG_CONFIG.spinner.component is how those get your look too: pass a component, and every spinner the library draws renders it instead.

Your component sits inside the library’s own size wrapper, so it keeps the sizing, the overlay behaviour, role="status" and the accessible name — only the visual is yours. An instance that asks for something specific still wins: <gog-spinner variant="ring"> is a ring even here. The provider on this demo is scoped to it, which is a route’s mechanism rather than an app’s — the rest of this page shows the built-in look. See Global Configuration for the full precedence rules, including gog-spinner-overlay, which honours the key from 21.10.0 on.

<gog-spinner size="lg" ariaLabel="Loading" />
<gog-button variant="primary" [loading]="saving()" (gogClick)="save()">Save</gog-button>

Custom color

Override --gog-spinner-color to recolor the spinner regardless of theme — useful when it sits on a surface where the default accent color wouldn't read well.

<gog-spinner ariaLabel="Loading, danger color" style="--gog-spinner-color: var(--gog-danger-color)" />
<gog-spinner ariaLabel="Loading, success color" style="--gog-spinner-color: var(--gog-success-color)" />

Overlay mode — gog-spinner-overlay

Wrap any section to block interaction while it loads. A companion component, gog-spinner-overlay, forwards variant/size/ ariaLabel straight to the inner gog-spinner. Its own variant is unset by default, so an overlay that asks for nothing forwards nothing and GOG_CONFIG.spinner reaches the spinner inside — the same way it reaches a bare gog-spinner. Until 21.10.0 that input defaulted to runic, which the inner spinner correctly read as an instance overruling the config, so this was the one place a configured house spinner never appeared.

<gog-spinner-overlay [loading]="loading()" size="lg" variant="ring" ariaLabel="Loading content">
  <div class="panel"><!-- any content --></div>
</gog-spinner-overlay>

Full-screen overlay

gog-spinner itself can render as a fixed, viewport-covering overlay via overlay="true" — distinct from gog-spinner-overlay above, which only covers its own content. Put it behind a flag that ends on its own: it swallows every click while it is up, so an always-on one takes the page hostage. On this page it covers the article rather than the window — the overlay is position: fixed, and any ancestor with a contain, transform, filter or backdrop-filter becomes its containing block instead of the viewport. This site's content area is a gog-scroll, which sets contain: layout style. In an app without such an ancestor it covers the whole window, and the same caveat applies to any fixed overlay, this library's or your own.

@if (loading()) {
  <gog-spinner [overlay]="true" size="lg" ariaLabel="Loading page" />
}