NGX-SKELETON SUITE

Key Features

Zero-CLS Layout Preservation

Automatically measures real component bounding boxes before loading and reserves height/width, preventing Cumulative Layout Shift (CLS).

7 Built-in Composite Presets

Instant complex shapes: card, profile-card, avatar, list-item, paragraph, table-row, and image-card.

Dynamic CSS Grid Engine

Generate multi-column skeleton grids on the fly with auto-fit minimum widths or responsive breakpoint objects ({ sm: 2, md: 4, lg: 6 }).

Universal Async & Signal Binding

Seamlessly unwrap Promises, RxJS Observables, and Angular Signals directly via directive microsyntax *skeleton="let user from user$".

---

Quick Installation

npm install ngx-skeleton-suite

import { Component } from '@angular/core';
import { SkeletonDirective } from 'ngx-skeleton-suite';

@Component({
  standalone: true,
  imports: [SkeletonDirective],
  template: `
    <div *skeleton="isLoading; preset: 'card'">
      <app-user-card />
    </div>
  `
})
export class UserComponent {
  isLoading = true;
}