Skeleton for Angular

import { AuiSkeleton } from '@absoluteui/angular/skeleton';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Skeleton page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { skeleton: { ... } } }) (see Configuration).

Example

import { Component, signal } from '@angular/core';
import { AuiSkeleton } from '@absoluteui/angular/skeleton';

@Component({
  selector: 'app-card',
  imports: [AuiSkeleton],
  template: `
    <section [attr.aria-busy]="loading() ? 'true' : null">
      @if (loading()) { <aui-skeleton shape="text" [lines]="3"></aui-skeleton> } @else { <p>{{ text() }}</p> }
    </section>`,
})
export class CardComponent {
  readonly loading = signal(true);
  readonly text = signal('');
}

<aui-skeleton>

Class AuiSkeleton; template reference #ref="auiSkeleton".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
shape	SkeletonShape	'text'	Placeholder shape.
lines	number	'3'	Text lines (integer 1..100); the last of several lines is 60% wide.
width	string | null		CSS length (px, rem, em, %, ch). null restores the default.
height	string | null		CSS length (px, rem, em, %, ch); per line for text. null restores the default.
animation	SkeletonAnimation	'pulse'	Pulse animation; always none under reduced motion.