ngx-skeleton

Angular placeholder preview component before the content is loaded.

Environment Support

• Angular 6+
• Server-side Rendering

Compatibility

Versions compatibility list:

ngx-skeleton	Angular
16.x.x	16.x.x
15.x.x	15.x.x
14.x.x	14.x.x
13.x.x	13.x.x
12.x.x	12.x.x
11.x.x	11.x.x
1.x.x	6.xx - 10.x.x

Installation

npm i ngx-skeleton

OR

yarn install ngx-skeleton

Demo

Demo page

Usage

Import NgxSkeletonModule into the current module's imports:

import { NgxSkeletonModule } from 'ngx-skeleton';

imports: [
  // ...
  NgxSkeletonModule,
],

You can also import NgxSkeletonComponent as standalone component:

import { NgxSkeletonComponent } from 'ngx-skeleton';

@Component({
  standalone: true,
  imports: [NgxSkeletonComponent],
  // ...
})
export class MyComponent {}

Use in your components (this is code example from demo page):

<ng-container *ngIf="!isLoading; else loadingContent">
  <h5>{{ movie.title }}</h5>
  <h6 class="text-black-50">{{ movie.date }}</h6>
</ng-container>
<ng-template #loadingContent>
  <ngx-skeleton height="24px" margin="0 0 8px 0" width="50%"></ngx-skeleton>
  <ngx-skeleton height="19px" margin="0 0 8px 0"></ngx-skeleton>
</ng-template>

API

Inputs

Input	Type	Default
animate	boolean	true
backgroundColor	string	'rgba(0, 0, 0, 0.08)'
borderRadius	number | string	0
height	number | string	'100%'
margin	number | string	0
variant	'rect' or 'circle'	'rect'
width	number | string	'100%'

License

MIT