ngx-content-loading v0.1.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

Usage

Import the module in your app module

1import { NgxContentLoadingModule } from 'ngx-content-loading';
2
3@NgModule({
4    imports: [ NgxContentLoadingModule ]
5})
6export class AppModule {}
7

Presets

Use presets

1<ngx-content-loading [width]="800">
2    <svg:g ngx-facebook-preset></svg:g>
3</ngx-content-loading>
4
5<ngx-content-loading [width]="800" [height]="800">
6    <svg:g ngx-instagram-preset></svg:g>
7</ngx-content-loading>

Available presets

- ngx-facebook-preset
- ngx-instagram-preset
- ngx-code-preset
- ngx-list-preset
- ngx-bullet-list-preset

Define custom shapes

1<ngx-content-loading 
2    [speed]="'1500ms'"
3    [width]="1000"
4    [height]="300"
5    [primaryColor]="'#222'"
6    [secondaryColor]="'#5e5e5e'">
7    <svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
8      <svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
9      <svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
10      <svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
11      <svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>
12  </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

1<ngx-content-loading 
2    [speed]="'1500ms'"
3    [width]="1000"
4    [height]="300"
5    [primaryColor]="'#222'"
6    [secondaryColor]="'#5e5e5e'">
7        <b before-svg>
8            I am transcluded before the svg
9        </b>
10        <svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
11        <svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
12        <svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
13        <svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
14        <svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>
15        
16        <b after-svg>
17            I am transcluded after the svg
18        </b>
19  </ngx-content-loading>

Development

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

License

MIT

Please notice this is a work in progress and may not be ready for production usage.

More presets and options will follow soon :)