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

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

dinbtechit/ngx-skeleton