Press "Enter" to skip to content

Easily Add Skeleton Loader to Angular7 | Ngx-Skltn

Ngx-Skltn is an Angular component that easily adds a skeleton loader to your Angular 7+ application.

skeleton loader angular, ngx skeleton loader, skeleton loader css, ngx skeleton loader appearance, ngx skeleton loader example, ngx skeleton loader is not a known element

Features

  • Flexible SVG structure depends on the size and position of the HTML elements
  • One animation for all shapes
  • Allow custom shapes to be used as a nested SVG element

How to Create a Skeleton Screen Loading In Pure CSS

How to make use of it:

Install

npm i --save-dev ngx-skltn

Usage

// app.module.ts
import { NgxSkltnModule, SkltnConfig } from 'ngx-skltn';
const skltnConfig: SkltnConfig = {
  rectRadius: 10,
  flareWidth: '150px',
  bgFill: '#d8d5d1',
  flareFill: 'rgba(255,255,255, 0.5)',
};

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    BrowserModule,
    NgxSkltnModule.forRoot(skltnConfig),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

// Defaults
// const defaultConfig = {
// rectRadius: 4,
// bgFill: '#ddd',
// flareFill: 'rgba(255, 255, 255, 0.6)',
// flareWidth: '150px',
// duration: 1200,
// delay: 0,
// timing: 'ease-in-out',
// };
<!-- app.component.html -->
<skltn-root duration="1000" [rectRadius]="10" flareWidth="50%" bgFill="#d8d5d1" flareFill="rgba(255,255,255, 0.5)">
  <!-- Card with Avatar -->
  <div class="skltn-card">
    <div skltn-bone class="skltn-card__avatar" type="circle"></div>
    <div class="skltn-card__body">
      <div skltn-bone class="skltn-card__title"></div>
      <div skltn-bone class="skltn-card__line"></div>
      <div skltn-bone class="skltn-card__line"></div>
    </div>
  </div>
</skltn-root>

Skeleton Loader For Angular, Ngx-Skltn Plugin/Github, ngx skeleton loader table, angularmaterial skeleton


See Demo And Download

Official Website(Komock): Click Here

This superior jQuery/javascript plugin is developed by Komock. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *