Angular placeholder preview component before the content is loaded.
- Angular 6+
- Server-side Rendering
Versions compatibility list:
ngx-skeleton | Angular |
---|---|
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 |
npm i ngx-skeleton
OR
yarn install ngx-skeleton
Import NgxSkeletonModule
into the current module's imports:
import { NgxSkeletonModule } from 'ngx-skeleton';
imports: [
// ...
NgxSkeletonModule,
],
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>
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%' |