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>

Overlay CSS file

As Angular cdk overlay is used, please import overlay css file.

Import file in styles file, @import '~@angular/cdk/overlay-prebuilt.css';

or add file in angular.json,

 "styles" : [
              ...,
              'node_modules/@angular/cdk/overlay-prebuilt.css'
            ]

But if Angular Material theme CSS file is already imported in project, nothing is required.

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
• facebook
• heart
• ring
• roller
• default
• ellipsis
• grid
• hourglass
• ripple
• spinner

License

MIT, feel free !