ngx-content-loading-2
v0.3.4
Published
Angular component to create SVG loading placeholders. Inspired by the awesome [React Content Loader](https://github.com/danilowoz/react-content-loader).
Downloads
423
Maintainers
Readme
ngx-content-loading v0.3.4
Angular component to create SVG loading placeholders. Inspired by the awesome React Content Loader.
Demo
Have a look at a demo app on Stackblitz
Install
npm i --save ngx-content-loading-2
Usage
Import the module in your app module
import { NgxContentLoadingModule } from 'ngx-content-loading-2';
@NgModule({
imports: [ NgxContentLoadingModule ]
})
export class AppModule {}
Presets
Use presets
<ngx-content-loading [width]="800">
<svg:g ngx-facebook-preset></svg:g>
</ngx-content-loading>
<ngx-content-loading [width]="800" [height]="800">
<svg:g ngx-instagram-preset></svg:g>
</ngx-content-loading>
Available presets
- ngx-facebook-preset
- ngx-instagram-preset
- ngx-code-preset
- ngx-list-preset
- ngx-bullet-list-preset
Define custom shapes
<ngx-content-loading
[speed]="'1500ms'"
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'">
<svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
<svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>
</ngx-content-loading>
API
| Name | Type | Default | Description |
| ------------------- | -------- | --------------- | --------------------------------------------------------------- |
| speed | Number | 1000ms
| Animation speed specified in s or ms |
| width | Number | 400
| viewBox width of SVG |
| height | Number | 130
| viewBox height of SVG |
| primaryColor | String | #f3f3f3
| Background the SVG |
| secondaryColor | String | #ecebeb
| Animation color |
| preserveAspectRatio | String | xMidYMid meet
| Aspect ratio option of SVG |
Transclude elements before and after the SVG element
<ngx-content-loading
[speed]="'1500ms'"
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'">
<b before-svg>
I am transcluded before the svg
</b>
<svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
<svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
<svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>
<b after-svg>
I am transcluded after the svg
</b>
</ngx-content-loading>
Development
Fork the repo then clone it
$ git clone [email protected]:YourUsername/ngx-content-loading.git && cd ngx-content-loading
Install the dependencies
$ yarn
or npm i
Run the demo app
$ npm start
License
Please notice this is a work in progress and may not be ready for production usage.
More presets and options will follow soon :)