Angular component to create SVG loading placeholders. Inspired by the awesome [React Content Loader](https://github.com/danilowoz/react-content-loader).
npm install ngx-content-loadingAngular component to create SVG loading placeholders. Inspired by the awesome React Content Loader.
Have a look at a demo app on Stackblitz
npm i --save ngx-content-loading
``javascript
import { NgxContentLoadingModule } from 'ngx-content-loading';
@NgModule({
imports: [ NgxContentLoadingModule ]
})
export class AppModule {}
`
#### Use presets
`html
`
#### Available presets
- ngx-facebook-preset
- ngx-instagram-preset
- ngx-code-preset
- ngx-list-preset
- ngx-bullet-list-preset
`html`
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'">
| Name | Type | Default | Description |
| ------------------- | -------- | --------------- | --------------------------------------------------------------- |
| speed | _Number_ | 1000ms | Animation speed specified in s or ms |400
| width | _Number_ | | viewBox width of SVG |130
| height | _Number_ | | viewBox height of SVG |#f3f3f3
| primaryColor | _String_ | | Background the SVG |#ecebeb
| secondaryColor | _String_ | | Animation color |xMidYMid meet
| preserveAspectRatio | _String_ | | Aspect ratio option of SVG |
`html`
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'">
I am transcluded before the svg
I am transcluded after the svg
Fork the repo then clone it
$ git clone git@github.com:YourUsername/ngx-content-loading.git && cd ngx-content-loading
Install the dependencies
$ yarn or npm i
Run the demo app
$ npm start`
Please notice this is a work in progress and may not be ready for production usage.
More presets and options will follow soon :)