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