🦴 ngxsmk-skeleton-loader

Angular 17+ standalone skeleton loader component & directive with SCSS animations (shimmer, pulse, wave). Lightweight, themeable, and designed for instant loading states.

✨ Features

⚡ Standalone Angular component — drop it anywhere, no NgModule needed
🎨 SCSS theming with CSS variables
🔄 Animations: shimmer, pulse, wave
🧩 Component + structural directive (*ngxsmkSkeleton)
📱 Responsive and mobile-friendly
♿ Accessible (role="presentation")
✅ SSR-safe (no direct DOM hacks)

📦 Installation

  npm install ngxsmk-skeleton-loader

Requires Angular 17+.

🚀 Usage

Component

<ngxsmk-skeleton type="text" width="80%"></ngxsmk-skeleton>
<ngxsmk-skeleton type="circle" size="56"></ngxsmk-skeleton>
<ngxsmk-skeleton type="rect" width="100%" [height]="180"></ngxsmk-skeleton>

Directive

<ng-container *ngxsmkSkeleton="loading; type: 'text'; width: '70%'">
  <p>Loaded content appears here</p>
</ng-container>

⚙️ Inputs

Input	Type	Default	Description
`type`	`'text' \| 'rect' \| 'circle' \| ...`	`text`	Shape preset
`width`	`string \| number`	`100%`	Width (string or px number)
`height`	`string \| number`	`1rem`	Height
`size`	`string \| number`	–	Shortcut for width+height
`radius`	`string \| number`	auto	Border radius
`animate`	`'shimmer' \| 'pulse' \| 'wave' \| 'none'`	`shimmer`	Animation style

🎨 Theming

Override CSS variables globally or per element:

ngxsmk-skeleton {
  --ngx-skel-base: #e5e7eb;
  --ngx-skel-highlight: #ffffffb3;
}

🛠 Development

  ng build ngxsmk-skeleton-loader

Output in dist/ngxsmk-skeleton-loader/.

📦 Publish

  cd dist/ngxsmk-skeleton-loader
  npm publish --access public

🖼 Demo

Use the provided demo app:

  ng serve ngxsmk-skeleton-demo

Then open http://localhost:4200.

📄 License

MIT

🌟 Community

If this saved you time, please ⭐ star the repo and share with fellow Angular devs!