- Notifications
You must be signed in to change notification settings - Fork21
Angular component to create SVG loading placeholders
License
NotificationsYou must be signed in to change notification settings
Gbuomprisco/ngx-content-loading
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Angular component to create SVG loading placeholders. Inspired by the awesomeReact Content Loader.
Have a look at a demo app onStackblitz
npm i --save ngx-content-loadingimport{NgxContentLoadingModule}from'ngx-content-loading';@NgModule({imports:[NgxContentLoadingModule]})exportclassAppModule{}
<ngx-content-loading[width]="800"><svg:gngx-facebook-preset></svg:g></ngx-content-loading><ngx-content-loading[width]="800"[height]="800"><svg:gngx-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:gngx-circlecy="30"cx="30"r="30"ry="5"></svg:g><svg:gngx-rectwidth="150"height="10"y="10"x="70"rx="5"ry="5"></svg:g><svg:gngx-rectwidth="90"height="10"y="40"x="70"rx="5"ry="5"></svg:g><svg:gngx-rectwidth="210"height="10"y="70"x="0"rx="5"ry="5"></svg:g><svg:gngx-rectwidth="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 |
<ngx-content-loading[speed]="'1500ms'"[width]="1000"[height]="300"[primaryColor]="'#222'"[secondaryColor]="'#5e5e5e'"><bbefore-svg> I am transcluded before the svg</b><svg:gngx-circlecy="30"cx="30"r="30"ry="5"></svg:g><svg:gngx-rectwidth="150"height="10"y="10"x="70"rx="5"ry="5"></svg:g><svg:gngx-rectwidth="90"height="10"y="40"x="70"rx="5"ry="5"></svg:g><svg:gngx-rectwidth="210"height="10"y="70"x="0"rx="5"ry="5"></svg:g><svg:gngx-rectwidth="240"height="10"y="100"x="0"rx="5"ry="5"></svg:g><bafter-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 ornpm 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 :)
About
Angular component to create SVG loading placeholders
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.