gog-skeleton

Skeleton

A placeholder bone that mirrors the shape of content still loading — text lines, avatars, images, cards — so the layout holds still and the user never stares at a blank screen.

Overview

Import the component and drop it into a template.

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

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

Basic usage — three stacked text lines:

<gog-skeleton shape="text" [lines]="3" style="width: 220px" />

Examples

Shapes

Three shapes cover most layouts: text for lines of copy, circle for avatars, and rect for images or media blocks.

text

circle

rect

<gog-skeleton shape="text" [lines]="3" style="width: 220px" />
<gog-skeleton shape="circle" size="lg" />
<gog-skeleton shape="rect" size="sm" />

Text lines

lines stacks several bars with the theme's spacing rhythm. Past one line, the last bar renders shorter — the same silhouette a real paragraph leaves behind.

1 line

3 lines

5 lines, sm

<gog-skeleton shape="text" [lines]="1" />
<gog-skeleton shape="text" [lines]="3" />
<gog-skeleton shape="text" [lines]="5" size="sm" />

Sizes

size follows the library's five-tier scale and controls line thickness, circle diameter, and default rect height.

xsm

slg

@for (sizeOption of sizes; track sizeOption) {
  <gog-skeleton shape="circle" [size]="sizeOption" />
}

Animations

pulse (default) fades opacity, wave sweeps a shimmer highlight across the bone, and none holds a static tone — useful when prefers-reduced-motion matters most, or the surrounding UI is already busy.

pulse

wave

none

@for (animationOption of animations; track animationOption) {
  <gog-skeleton shape="rect" size="xsm" [animation]="animationOption" />
}

Custom dimensions & corners

width/height override the shape/size default outright, and rounded="false" squares off the corners — handy for a banner image that bleeds to the edge of its container.

custom 64px

custom 56px

square corners

<gog-skeleton shape="rect" width="100%" height="64px" />
<gog-skeleton shape="circle" width="56px" />
<gog-skeleton shape="rect" [rounded]="false" />

Composed: profile card

Real screens rarely load a single shape in isolation — a card is usually an avatar plus a couple of text lines plus a media block, all resolving together. This one re-loads on demand so you can see the swap from bones to content.

@if (loading()) {
  <div class="profile-card__header">
    <gog-skeleton shape="circle" size="lg" ariaLabel="Loading profile" />
    <div class="profile-card__header-text">
      <gog-skeleton shape="text" width="65%" />
      <gog-skeleton shape="text" width="40%" size="sm" />
    </div>
  </div>
  <gog-skeleton shape="rect" size="md" />
  <gog-skeleton shape="text" [lines]="3" />
} @else {
  <!-- real avatar, name, banner, bio -->
}

Composed: product grid

A product listing loads image, title, and price bones per card, all at once — a different rhythm than a single profile: several identical composites side by side.

<div class="product-grid">
  @for (placeholder of [0, 1, 2, 3]; track placeholder) {
    <div class="product-card">
      <gog-skeleton shape="rect" height="120px" />
      <gog-skeleton shape="text" width="80%" />
      <gog-skeleton shape="text" width="30%" size="sm" />
    </div>
  }
</div>

Composed: chat conversation

A less obvious case: message bubbles of varying width, alternating sides, an avatar only on the other person's messages — rect bones stand in for the bubbles themselves, sized per message instead of a fixed shape.

<div class="chat-thread">
  @for (message of messages; track $index) {
    <div class="chat-row" [class.chat-row--mine]="message.fromMe">
      @if (!message.fromMe) {
        <gog-skeleton shape="circle" size="xsm" />
      }
      <gog-skeleton shape="rect" size="sm" [width]="message.width" />
    </div>
  }
</div>

API Reference

Inputs

Name	Type	Default	Description
`shape`	`'text' \| 'circle' \| 'rect'`	`'text'`	text for lines of copy, circle for avatars, rect for images or media blocks.
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`'md'`	Line thickness, circle diameter, and default rect height.
`animation`	`'pulse' \| 'wave' \| 'none'`	`'pulse'`	pulse fades opacity, wave sweeps a shimmer highlight, none holds a static tone — useful under prefers-reduced-motion or when the surrounding UI is already busy.
`width`	`string \| null`	`null`	CSS width, e.g. '240px' or '60%'. Falls back to a shape/size default when unset.
`height`	`string \| null`	`null`	CSS height override. Ignored for text, whose lines size from size instead.
`lines`	`number`	`1`	shape="text" only: number of stacked lines. Past one line, the last one renders shorter.
`rounded`	`boolean`	`true`	Set false to square off the corners — handy for a banner image that bleeds to the edge.
`ariaLabel`	`string \| null`	`null`	Decorative (aria-hidden) by default, since a page can carry dozens of these while loading. Set on the one instance that should actually announce the loading state — it then gets role="status".

Styling Tokens

Every CSS custom property the skeleton 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-skeleton-base / -shine`	Placeholder base color and shimmer.
`--gog-skeleton-radius / -line-radius`	Corner radius, block and line shapes.
`--gog-skeleton-pulse-duration / -wave-duration`	Loading animation timing.