Angular 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
Import the module in your app module
import { NgxContentLoadingModule } from 'ngx-content-loading'; @NgModule({ imports: [ NgxContentLoadingModule ] }) export class AppModule {}
<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>
- ngx-facebook-preset
- ngx-instagram-preset
- ngx-code-preset
- ngx-list-preset
- ngx-bullet-list-preset
<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>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>
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 :)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4