Ngx-spinner-auto-hide NPM

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

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	Angular 8
>= `v1.2.0`	>= `v2.0.0`	>= `v7.2.0`	>= `v8.0.3`

Browser Support

Chrome	Firefox	IE / Edge	Safari	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