🦴 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!