☠️ Ngx-Skltn

Easily add skeleton loader to your Angular7+ app


Demo: komock.github.io/ngx-skltn

TLDR

Stackblitz example

Features

1. Flexible SVG skeleton based on size & position of HTML elements
2. Single animation for all shapes
3. Allow use custom shapes as nested SVG element (example below)

Versions

| ngx-skltn | Angular |
| --------- | ------- |
| >1 | >=5 |
| >2 | >=8 |

Install

Npm

``sh
npm i --save-dev ngx-skltn
`

Usage


`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 tag, this allow stratch shape with aspect ratio
`html

Custom Path Template

``