Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngxsmk-skeleton-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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