ngx-anywhere-spinner
v0.0.13
Published
## Do you need this library ?
Downloads
20
Maintainers
Readme
Put spinner anywhere in Angular
Do you need this library ?
This library aims to improve user experience when data is loading in angular project. This library is different than Angular Material Spinner or Ng Primer Spinner. This library uses angular cdk overlay to put the spinner over any content. This is done without adding / modifying HTML or CSS of the inner component, but by the non intrusive way.
Usage
Just put the directive anywhere-spinner
in the html container tag and bind a status variable to control the spinner status.
<div anywhere-spinner [anywhere-spinner-status]="loading"></div>
If want to put the spinner over a component,
<some-component anywhere-spinner [anywhere-spinner-status]="loading"></some-component>
In the above cases, loading is a variable,
loading = true;
//fetch data by http or some tasks
loading = false;
In some situations, we can also bind an observable variable to control the spinner status.
<div anywhere-spinner [anywhere-spinner-status$]="loading$"></div>
More Options
anywhere-spinner-options
is available to pass more options.
<div anywhere-spinner [anywhere-spinner-status]="loading" [anywhere-spinner-options]="options"></div>
options = {
"message":"Waiting data from server",
"type":"ring"
}
Spinner types
Thanks for Pure CSS Loaders under CC0 License! This library integrates these 12 types spinners :
- circle
- dual-ring
- heart
- ring
- roller
- default
- ellipsis
- grid
- hourglass
- ripple
- spinner
License
MIT, feel free !