gog-spinner

Spinner

A branded loading indicator with two built-in animated variants, fully custom-content support, size variants, per-instance color and speed overrides, and both a content-scoped and a full-screen overlay mode.

Overview

Import the component and drop it into a template.

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

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

Basic usage:

<gog-spinner ariaLabel="Loading" />

Examples

Sizes

Five size steps, from xsm to slg.

xsm

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.

runic

ring

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

slow (2.4s)

fast (0.5s)

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

custom

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

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.

danger

success

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

This area can be a card, a sidebar, or any section.

<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" />
}

API Reference

gog-spinner — Inputs

Name	Type	Default	Description
`variant`	`'runic' \| 'ring' \| 'custom'`	`'runic'`	runic and ring are built-in presets. custom renders your own markup via content projection — it inherits the size wrapper, overlay behavior, and --gog-spinner-color theming, but the visuals are yours.
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`'md'`	Wrapper and glyph size.
`overlay`	`boolean`	`false`	Renders as a fixed, viewport-covering overlay. Distinct from gog-spinner-overlay below, which only covers its own content.
`ariaLabel`	`string`	`'Loading'`	Accessible name announced to assistive tech.

gog-spinner-overlay — Inputs

Name	Type	Default	Description
`loading`	`boolean`	`false`	Shows a scrim + spinner over the projected content while true.
`variant`	`'runic' \| 'ring' \| 'custom'`	`'runic'`	Forwarded to the inner gog-spinner.
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`'md'`	Forwarded to the inner gog-spinner.
`ariaLabel`	`string`	`'Loading'`	Forwarded to the inner gog-spinner.

Styling Tokens

Every CSS custom property the spinner 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-spinner-track-color`	Background ring.
`--gog-spinner-arc-outer-color / -arc-inner-color`	Spinning arc colors.
`--gog-spinner-diamond-color / -rune-color / -glow-color`	Decorative elements on the larger spinner variants.
`--gog-spinner-spin-duration / -pulse-duration`	Animation timing.