🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

NgxSpinner an animated loading spinner for Angular 5+ that is intended to inform the user that an operation is in progress.

Animation Plugins

Documentation

NgxSpinner

A library for loading spinner specifically for Angular 4/5/6/7/8. (https://napster2210.github.io/ngx-spinner/)

ng5 Support Support Support License devDependency Status

What's New

  • Latest update for Angular 8 🎉🎉🥳🥳
  • Multiple Spinner Support 🎉🎉🥳🥳
  • Configurable option through service 🎉🎉🥳🥳
  • Fullscreen Mode(Enable/Disable)
  • show()/hide() methods return promise

Use appropriate version based on your Angular version.

Angular 4 Angular 5 Angular 6/7/8
>= v1.2.0 >= v2.0.0 >= v8.0.1

Table of contents

Browser Support

Chrome
Chrome
Firefox
Firefox
IE / Edge
IE / Edge
iOS Safari
Safari
Opera
Opera
Latest ✔ Latest ✔ IE11, Edge ✔ Latest ✔ Latest ✔

Demo

Working Demo

StackBlitz Demo:

Installation

ngx-spinner is available via npm and yarn

Using npm:

$ npm install ngx-spinner --save

Using yarn:

$ yarn add ngx-spinner

Usage

Import NgxSpinnerModule in in the root module(AppModule):

// Import library module import { NgxSpinnerModule } from "ngx-spinner";  @NgModule({   imports: [     // ...     NgxSpinnerModule   ] }) export class AppModule {}

Add NgxSpinnerService service wherever you want to use the ngx-spinner.

import { NgxSpinnerService } from "ngx-spinner";  class AppComponent implements OnInit {   constructor(private spinner: NgxSpinnerService) {}    ngOnInit() {     /** spinner starts on init */     this.spinner.show();      setTimeout(() => {       /** spinner ends after 5 seconds */       this.spinner.hide();     }, 5000);   } }

Now use in your template

<ngx-spinner></ngx-spinner>

See Demo

NgxSpinner Service

  • NgxSpinnerService.show() Shows the spinner
  • NgxSpinnerService.hide() Hides the spinner

NgxSpinner Component

<ngx-spinner   bdColor="rgba(51,51,51,0.8)"   size="medium"   color="#fff"   type="ball-scale-multiple" >   <p style="font-size: 20px; color: white">Loading...</p> </ngx-spinner>
  • [bdColor]: RGBA color format. To set background-color for backdrop, default rgba(51,51,51,0.8) where aplha value(0.8) is opacity of backdrop
  • [size]: Anyone from small, default, medium, large. To set size of spinner, default large
  • [color]: Any css color format. To set color of spinner, default #fff
  • [type]: Choose any animation spinner from Load Awesome. To set type of spinner, default ball-scale-multiple
  • [fullScreen]: true or false To enable/disable fullscreen mode(overlay), default true
  • [name]: For multiple spinners To set name for spinner, default primary

NOTE:

  • You can pass HTML code as loading text now, instead of input parameter(loadingText). Check above code for reference.
  • If you want multiple ngx-spinner instance, just add name attribute with ngx-spinner component. But in this case, you've to pass that particular name of a spinner in show/hide method. Check Demo
  • You can also change the options/configuration of spinner through service now.
this.spinner.show("mySpinner", {   type: "line-scale-party",   size: "large",   bdColor: "rgba(100,149,237, .8)",   color: "white" });

How to use type?

  • Go to the Load Awesome.
  • Select any animation, copy name of animation, replace all spaces with hyphen(-) and all letters should be lowercase.
    • Let's say if I select "Ball 8bits" animation then type will be ball-8bits.
    • For more information you can check it out Demo

Versioning

ngx-spinner will be maintained under the Semantic Versioning guidelines. Releases will be numbered with the following format:

<major>.<minor>.<patch>

For more information on SemVer, please visit http://semver.org.

Creator

Yuvraj Chauhan

Future Plan

  • Dynamic z-index
  • Image support for spinner
  • Interceptor Implementation (Coming soon)

Credits

Inspired by Load Awesome by Daniel Cardoso.

Thanks Alex Vieira Alencar for helping me with Multiple Spinner Support.

License

ngx-spinner is MIT licensed.


You May Also Like