[](https://travis-ci.com/Komock/ngx-skltn)
[](https://badge.fury.io/js/ngx-skltn)
[](https://bundlephobia.com/result?p=ngx-skltn@latest)
# ☠️ Ngx-Skltn
Easily add skeleton loader to your Angular7+ app
Demo: [komock.github.io/ngx-skltn](https://komock.github.io/ngx-skltn)
## TLDR
[Stackblitz example](https://stackblitz.com/edit/ngx-skltn)
## 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 `