Overview
Skeleton component displays a placeholder preview while content is loading.
Import
import { MagarySkeleton } from 'ng-magary';
Basic Usage
<magary-skeleton></magary-skeleton>
Shapes
<magary-skeleton
[shape]="'rectangle'"
[width]="'100%'"
[height]="'4rem'">
</magary-skeleton>
Custom Dimensions
<magary-skeleton
[width]="'300px'"
[height]="'150px'"
[borderRadius]="'8px'">
</magary-skeleton>
Animation
<magary-skeleton
[animation]="'shimmer'">
</magary-skeleton>
Loading Card Example
<div class="card" *ngIf="loading; else content">
<!-- Skeleton placeholder -->
<magary-skeleton
[width]="'100%'"
[height]="'200px'"
[borderRadius]="'8px'">
</magary-skeleton>
<div class="p-4">
<magary-skeleton
[width]="'60%'"
[height]="'1.5rem'"
class="mb-2">
</magary-skeleton>
<magary-skeleton
[width]="'100%'"
[height]="'1rem'"
class="mb-1">
</magary-skeleton>
<magary-skeleton
[width]="'80%'"
[height]="'1rem'">
</magary-skeleton>
</div>
</div>
<ng-template #content>
<!-- Actual content -->
<div class="card">
<img [src]="data.image" alt="Product">
<div class="p-4">
<h3>{{ data.title }}</h3>
<p>{{ data.description }}</p>
</div>
</div>
</ng-template>
Profile Card Skeleton
<div class="profile-skeleton">
<!-- Avatar -->
<magary-skeleton
[shape]="'circle'"
[size]="'80px'"
class="mb-3">
</magary-skeleton>
<!-- Name -->
<magary-skeleton
[width]="'150px'"
[height]="'1.5rem'"
class="mb-2">
</magary-skeleton>
<!-- Email -->
<magary-skeleton
[width]="'200px'"
[height]="'1rem'"
class="mb-3">
</magary-skeleton>
<!-- Button -->
<magary-skeleton
[width]="'120px'"
[height]="'2.5rem'"
[borderRadius]="'4px'">
</magary-skeleton>
</div>
Table Skeleton
<div class="table-skeleton">
<div *ngFor="let _ of [].constructor(5)" class="table-row">
<magary-skeleton
[width]="'100%'"
[height]="'3rem'"
class="mb-2">
</magary-skeleton>
</div>
</div>
shape
'rectangle' | 'circle'
default:"'rectangle'"
Shape of the skeleton
Size for circle (sets both width and height)
Border radius (ignored for circle shape)
animation
'shimmer' | 'none'
default:"'shimmer'"
Animation effect
Multiple Skeletons
<div class="content-list">
<div *ngFor="let item of [1,2,3,4,5]" class="list-item">
<div class="flex gap-3">
<magary-skeleton
[shape]="'circle'"
[size]="'40px'">
</magary-skeleton>
<div class="flex-1">
<magary-skeleton
[width]="'70%'"
[height]="'1rem'"
class="mb-2">
</magary-skeleton>
<magary-skeleton
[width]="'90%'"
[height]="'0.875rem'">
</magary-skeleton>
</div>
</div>
</div>
</div>
Features
- Multiple shapes: Rectangle and circle
- Customizable: Width, height, border radius
- Animation: Shimmer effect or static
- Flexible: Works for any content type
- Responsive: Percentage-based sizing
- Lightweight: Minimal overhead
Best Practices
- Match skeleton dimensions to actual content
- Use multiple skeletons to represent complex layouts
- Keep animation consistent across app
- Consider accessibility (screen readers)
- Don’t overuse - can be distracting
Accessibility
- Uses ARIA live region
- Announces loading state to screen readers
- Does not trap focus
