Nonstop Pajama Models

    ngx-skeleton
    TypeScript icon, indicating that this package has built-in type declarations

    14.0.0 • Public • Published

    ngx-skeleton

    Angular placeholder preview component before the content is loaded.

    npm NPM npm bundle size

    Environment Support

    • Angular 6+
    • Server-side Rendering

    Compatibility

    Versions compatibility list:

    ngx-skeleton Angular
    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,
    ],

    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

    Install

    npm i ngx-skeleton

    DownloadsWeekly Downloads

    242

    Version

    14.0.0

    License

    MIT

    Unpacked Size

    36.8 kB

    Total Files

    18

    Last publish

    Collaborators

    • avivharuzi