@styloviz/skeleton-loader

Loading placeholders with wave/pulse animations and preset layouts.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/skeleton-loader

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvSkeletonLoaderComponent } from '@styloviz/skeleton-loader';

@Component({
  standalone: true,
  imports: [SvSkeletonLoaderComponent],
  template: `
    <sv-skeleton-loader preset="card" animation="wave" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | preset | SkeletonPreset | 'custom' | High-level composed preset. Set to 'custom' (or omit) to control individual bone inputs. | | shape | SkeletonShape | 'line' | Shape of the skeleton bone. | | width | string | '100%' | CSS width applied to the bone element. Accepts any valid CSS value: '100%', '8rem', 'w-1/2' (Tailwind class). | | height | string | '1rem' | CSS height applied to the bone element. | | rounded | string | '' | Border-radius override. Accepts Tailwind rounded-* class suffix: 'none' 'sm' 'md' 'lg' 'xl' 'full'. Shape defaults apply when left empty. | | lines | number | 1 | Repeat this bone N times stacked vertically. Gaps between repeated lines are automatic. | | shortLastLine | boolean | true | When lines > 1, make the last line shorter (like a real paragraph ending). | | animation | SkeletonAnimation | 'wave' | Shimmer animation style. | | size | 'sm' \| 'md' \| 'lg' | 'md' | Overall size multiplier that scales preset bone heights. | | customClass | string | '' | Additional CSS classes merged onto the root wrapper. | | ariaLabel | string | 'Loading content…' | Accessible label announced to screen readers while content loads. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/skeleton-loader

License

MIT