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