🦴 ng-angular-skeleton

Auto-detecting skeleton loader for Angular with 5 animation types and zero configuration needed.

⚡ Quick Start (30 seconds)

npm install ng-angular-skeleton

import { NgSkeletonComponent } from 'ng-angular-skeleton';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [NgSkeletonComponent],
  template: `
    <ng-angular-skeleton [loading]="isLoading()">
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
    </ng-angular-skeleton>
  `
})
export class ExampleComponent {
  isLoading = signal(true);
  title = signal('');
  
  constructor(private api: ApiService) {
    this.api.getData().subscribe(data => {
      this.title.set(data.title);
      this.isLoading.set(false);
    });
  }
}

Done! Auto-detection works out of the box.

✨ Features

• ✅ Auto-detects DOM elements
• ✅ 5 animation types (shimmer, pulse, fade, wave, bounce)
• ✅ Customizable speed & easing
• ✅ Dark mode support
• ✅ SSR compatible
• ✅ Zero configuration
• ✅ OnPush optimized

📖 API Reference

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | loading | Signal<boolean> | false | Show/hide skeleton | | animationType | 'shimmer' \| 'pulse' \| 'fade' \| 'wave' \| 'bounce' | 'shimmer' | Animation style | | animationSpeed | number | 1600 | Duration in ms | | animationEasing | 'ease' \| 'ease-in' \| 'ease-out' \| 'ease-in-out' \| 'linear' | 'ease-in-out' | Easing function | | minBoneH | number | 12 | Min height to detect (px) | | minBoneW | number | 20 | Min width to detect (px) |

🎬 Animation Types

1. Shimmer (Default)

<ng-angular-skeleton [loading]="isLoading()">
  Content
</ng-angular-skeleton>

2. Pulse

<ng-angular-skeleton 
  [loading]="isLoading()" 
  animationType="pulse">
  Content
</ng-angular-skeleton>

3. Fade

<ng-angular-skeleton 
  [loading]="isLoading()" 
  animationType="fade">
  Content
</ng-angular-skeleton>

4. Wave

<ng-angular-skeleton 
  [loading]="isLoading()" 
  animationType="wave">
  Content
</ng-angular-skeleton>

5. Bounce

<ng-angular-skeleton 
  [loading]="isLoading()" 
  animationType="bounce">
  Content
</ng-angular-skeleton>

⚙️ Customization

Control Animation Speed

<!-- Slower (2.5 seconds) -->
<ng-angular-skeleton 
  [loading]="isLoading()" 
  [animationSpeed]="2500">
  Content
</ng-angular-skeleton>

<!-- Faster (1 second) -->
<ng-angular-skeleton 
  [loading]="isLoading()" 
  [animationSpeed]="1000">
  Content
</ng-angular-skeleton>

Change Easing

<ng-angular-skeleton 
  [loading]="isLoading()" 
  animationEasing="linear">
  Content
</ng-angular-skeleton>

Combine Options

<ng-angular-skeleton 
  [loading]="isLoading()"
  animationType="pulse"
  [animationSpeed]="1200"
  animationEasing="ease-in">
  Content
</ng-angular-skeleton>

Detect Small Elements

<ng-angular-skeleton 
  [loading]="isLoading()"
  [minBoneH]="8"
  [minBoneW]="10">
  Content
</ng-angular-skeleton>

🌙 Dark Mode

Auto-enabled with data-theme="dark":

<div [attr.data-theme]="isDarkMode() ? 'dark' : 'light'">
  <ng-angular-skeleton [loading]="isLoading()">
    Content
  </ng-angular-skeleton>
</div>

💡 Common Examples

HTTP Request

export class MyComponent implements OnInit {
  isLoading = signal(true);
  data = signal<any>(null);

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/api/data').subscribe({
      next: (res) => {
        this.data.set(res);
        this.isLoading.set(false);
      },
      error: () => this.isLoading.set(false)
    });
  }
}

<ng-angular-skeleton [loading]="isLoading()" animationType="pulse">
  <div>{{ data() | json }}</div>
</ng-angular-skeleton>

Product List

@for (product of products(); track product.id) {
  <ng-angular-skeleton 
    [loading]="isLoading()" 
    animationType="fade">
    <div class="product">
      <img [src]="product.image">
      <h3>{{ product.name }}</h3>
    </div>
  </ng-angular-skeleton>
}

With Error Handling

@if (error()) {
  <div class="error">{{ errorMsg() }}</div>
} @else {
  <ng-angular-skeleton [loading]="isLoading()" animationType="wave">
    <div>{{ data() }}</div>
  </ng-angular-skeleton>
}

Progressive Loading

<ng-angular-skeleton [loading]="loadingHeader()" animationType="shimmer">
  <header>Header Content</header>
</ng-angular-skeleton>

<ng-angular-skeleton [loading]="loadingBody()" animationType="pulse">
  <main>Main Content</main>
</ng-angular-skeleton>

<ng-angular-skeleton [loading]="loadingFooter()" animationType="fade">
  <footer>Footer Content</footer>
</ng-angular-skeleton>

❓ FAQ

Q: Why some elements not detected?
A: Increase minBoneH and minBoneW if elements are too small, or decrease them if you want to detect smaller elements.

Q: Can I use with NgModule?
A: Yes, import as standalone:

@NgModule({
  imports: [NgSkeletonComponent]
})
export class MyModule {}

Q: Does it work with SSR?
A: Yes, automatically SSR-safe.

Q: Can I combine animations?
A: Use one animation type at a time.

Q: Custom animation?
A: Not yet, coming in v1.1.0. Use one of the 5 built-in types for now.

🌐 Browser Support

| Chrome | Firefox | Safari | Edge | |--------|---------|--------|------| | 90+ | 88+ | 14+ | 90+ |

📚 Full Documentation

• 📖 Complete Setup Guide
• ⚡ Quick Reference
• 🗺️ Features & Roadmap
• 🔄 Migration Guide
• 🔧 Troubleshooting

📝 License

MIT © myselfmudasir

🔗 Links

• GitHub: angular-skeleton
• NPM: ng-angular-skeleton

Version: 1.0.2 | Status: Stable ✅