Site icon NgDeveloper

Angular 8 Loading / Spinner ng-spin-kit component Example

Mirthbees

Update as on 12th April 2020: Angular 9 –  NgSpinKit – Won’t work

If you are working with angular 9 and thinking to use ngspinkit then do not use. Because as of 12th April 2020, angular 9 + ngspinkit + ivy is not supported. So you will be getting the compilation issues.

Angular 8 Loading / Spinner ng-spin-kit component Example:

It is our responsible to show the user about the process to make them understand what is happening currently. So loading/spinners are widely used to show the current progress (using progress) or normal loading icon. Today we are going to see how to use ng-spin-kit angular spinner component to show while data loading is in progress.

It can even be achieved with normal CSS or HTML 5 animation with hidden angular attribute. If you are looking for more optioned dynamic / more interactive spinners, then it is good to go with already available angular components.

As on Aug 30 2017 these are top 3 spinners available for angular 2+ with more stars:

  1. WoltersKluwerPL/ng-spin-kit – 63 stars (Typescript)
  2. kuuurt13/ng-block-ui – 21 stars (Typescript)
  3. moff/angular2-loaders-css – 17 stars (Typescript)

If you want to show normal loading button / animation without any component you can do this way:

Html Component:

[plain]
<button [hidden]=”isDataLoaded” class=”btn btn-lg btn-warning”>
<span class=”glyphicon glyphicon-refresh glyphicon-refresh-animate”></span> Loading…
</button>
[/plain]

Typescript:

[html]
// initialize with false – so that it will show loading button when page loads
isDataLoaded=false;

constructor( private couponService : CouponService){
this.couponService.getAllCoupons().subscribe(
response => {
// your business logics if any before populating/loading data
this.isDataLoaded=true;
// now hidden attribute will become true so it will be hidden.
}
)
}

[/html]

Let’s start to use ng-spin-kit angular spinner component:

Step 1: Install ng-spin-kit

[html]
npm install ng-spin-kit –save
[/html]

Step 2: Import NgSpinKitModele to your module:

[html]
import { NgSpinKitModule } from ‘ng-spin-kit’
[/html]

Step 3: Html template use

It supports around 12 different loading spinners:

[plain]

<sk-rotating-plane></sk-rotating-plane>
<sk-double-bounce></sk-double-bounce>
<sk-wave></sk-wave>
<sk-wandering-cubes></sk-wandering-cubes>
<sk-pulse></sk-pulse>
<sk-chasing-dots></sk-chasing-dots>
<sk-circle></sk-circle>
<sk-three-bounce></sk-three-bounce>
<sk-cube-grid></sk-cube-grid>
<sk-word-press></sk-word-press>
<sk-fading-circle></sk-fading-circle>
<sk-folding-cube></sk-folding-cube>

[/plain]

Step 4: Control through Typescript:

Html Template:

[plain]

<sk-fading-circle [isRunning]=”spinnerDisplay”></sk-fading-circle>

[/plain]

Typescript:

[html]
// initialize with true- so that it will show loading button when page loads
spinnerDisplay=true;

constructor( private couponService : CouponService){
this.couponService.getAllCoupons().subscribe(
response => {
// your business logics if any before populating/loading data
this.spinnerDisplay=false;
}
)
}

[/html]

Available spinners:

After implemented in my usecase:

Supported Properties:

As per the documentation:

But For me only isRunning and delay attribute worked, color attribute did not work when I tested.

Pros of ng-spin-kit:

  1. More spinners provided.
  2. Very easy to understand and use.
  3. No Additional dependencies required.

Cons of ng-spin-kit:

  1. Documentation can be better, probably with all the use cases of differnt combination of supported properties.
    2. No option to control the size of the spinners, still it can be achieved using css.
    3. It would be good if ui block option also provided.

Conclusion:

I really loved this ng-spin-kit component. Though it can not be used for all the use cases like blocking and loading the spinners, it is still very good to understand and use.

Feel free to share your favourite angular 2+ spinners in the below commnets section.

Exit mobile version