Need help with ngx-content-loading?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Gbuomprisco
124 Stars 19 Forks MIT License 37 Commits 11 Opened issues

Description

Angular component to create SVG loading placeholders

Services available

!
?

Need anything else?

Contributors list

# 62,569
placeho...
TypeScr...
angular...
Angular
33 commits

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

import { NgxContentLoadingModule } from 'ngx-content-loading';

@NgModule({ imports: [ NgxContentLoadingModule ] }) export class AppModule {}

Presets

Use presets

    



    

Available presets

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

Define custom shapes

    
      
      
      
      
  

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

        
            I am transcluded before the svg
        
        
        
        
        
        

    <b after-svg>
        I am transcluded after the svg
    </b>

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

MIT

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

More presets and options will follow soon :)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.