Skeleton loader for Angular
npm install ngx-skltn



Demo: komock.github.io/ngx-skltn
``sh`
npm i --save-dev ngx-skltn
ts
// 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',
// };
``css
/ styles.css /
.skltn-card {
margin: 20px 0 48px;
}
.skltn-card__avatar {
width: 60px;
height: 60px; / <-- Don't forget height /
margin-bottom: 20px;
}
.skltn-card__title {
height: 32px;
margin-bottom: 20px;
}
.skltn-card__line {
height: 20px;
margin-bottom: 20px;
}
.skltn-card__line:last-child {
width: 60%;
}
`
`html
`Custom Shape
Important! [pathWidth]="24" [pathHeight]="22" should be same as on