ngxsmk-skeleton-loader: Angular Skeleton Loader for Angular and Ionic

Fast, themeable Angular skeleton loader for Angular 22 and Ionic Angular apps. Use standalone components, NgModule imports, SSR-friendly rendering, shimmer placeholders, pulse placeholders, wave placeholders, and responsive loading states with a small API.

Preview

Angular Skeleton Loader Features

• Standalone Angular component and structural directive
• NgModule export for module-based apps and many Ionic page/module setups
• SSR and prerender friendly: no direct browser DOM creation
• Ionic-aware color fallbacks through --ion-color-step-*
• Themeable with CSS custom properties
• Motion-safe animations with prefers-reduced-motion
• Tiny API for text, rect, circle, avatar, button, and image skeleton presets

Install Angular Skeleton Loader

npm install ngxsmk-skeleton-loader

This release is built for Angular 22. For older Angular majors, publish or maintain matching package majors built with the same Angular major.

Standalone Angular Usage

import {Component} from '@angular/core';
import {NgxSmkSkeletonComponent, NgxSmkSkeletonDirective} from 'ngxsmk-skeleton-loader';

@Component({
  standalone: true,
  imports: [NgxSmkSkeletonComponent, NgxSmkSkeletonDirective],
  templateUrl: './profile.html',
})
export class ProfileComponent {
  loading = true;
}

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

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

Angular NgModule and Ionic Usage

import {NgModule} from '@angular/core';
import {IonicModule} from '@ionic/angular';
import {NgxSmkSkeletonModule} from 'ngxsmk-skeleton-loader';

@NgModule({
  imports: [IonicModule, NgxSmkSkeletonModule],
})
export class ProfilePageModule {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | type | 'text' \| 'rect' \| 'circle' \| 'avatar' \| 'button' \| 'image' | text | Shape preset | | width | string \| number | 100% | Width; numbers become px | | height | string \| number | preset | Height; numbers become px | | size | string \| number | unset | Shortcut for equal width and height | | radius | string \| number | preset | Border radius | | animate | 'shimmer' \| 'pulse' \| 'wave' \| 'none' | shimmer | Animation style | | tint | string | unset | Base color override | | visible | boolean | false | Shows projected content if true, hides placeholder | | shimmerColors | string[] | unset | Custom gradient colors for shimmer/wave | | locations | number[] | unset | Custom stops (0 to 1) for shimmer colors | | duration | number | unset | Animation duration in milliseconds | | delay | number | unset | Animation delay in milliseconds | | reverse | boolean | false | Reverses animation direction | | stopAnimation | boolean | false | Pauses/freezes running animation |

Skeleton Loader Theming

Override CSS variables globally, per page, or per skeleton:

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

In Ionic apps, the component falls back to Ionic color-step variables:

ion-content {
  --ngx-skel-base: var(--ion-color-step-200);
  --ngx-skel-highlight: var(--ion-color-step-50);
}

Development

npm run build -- ngxsmk-skeleton-loader
ng test ngxsmk-skeleton-loader --watch=false --browsers=ChromeHeadless

Publish

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

Author

Developed and maintained by Sachin Dilshan.

License

MIT