Ngx Spinner, A library with more than 50 different loading spinners for Angular 4/5/6/7/8/9/10.

Ngx Spinner, A library with more than 50 different loading spinners for Angular 4/5/6/7/8/9/10.


Published at - Aug 13, 2021

NGX Spinner for Angular 4+, Learn how to use ngx spinner in our project, how to install it and customization.

Installation

ngx-spinner is available via npm and yarn

Using npm:

$ npm install ngx-spinner --save

Using yarn:

$ yarn add ngx-spinner

Using angular-cli:

$ ng add ngx-spinner

Usage

Import NgxSpinnerModule in in the root module(AppModule):

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
// Import library module
import { NgxSpinnerModule } from "ngx-spinner";
 
@NgModule({
  imports: [
    // ...
    NgxSpinnerModule
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
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

Methods

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

Available Options

  • [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 smalldefaultmediumlarge. 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
  • [zIndex]: For dynamic z-index To set z-index for the spinner, default 99999
  • [template]: For custom spinner image To set custom template for the custom spinner, default null

Using Spinner Type

<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>

Using Custom Spinner

<ngx-spinner  bdColor="rgba(0, 0, 0, 1)">  template="<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />" </ngx-spinner>

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 an 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(0, 0, 0, 1)",
  color: "white",
  template: "<img src='https://media.giphy.com/media/o8igknyuKs6aY/giphy.gif' />"
});

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

Useful Tips

  • Make sure you’ve added CUSTOM_ELEMENTS_SCHEMA as your schema in your main module.
  • If you use multiple show() methods in a single component or single function one after another then wrap the show() method within setTimeout() method to avoid any rendering issue.
  • When you want to use spinner inside any container(fullScreen: false), in that case your parent element of spinner must have position: relative; style property.
  • You can’t set custom template through service options, it’s a limitation by Angular itself.




About author

Harendra
Harendra Kanojiya

Hello, I am Harendra Kumar Kanojiya - Owner of this website and a Fullstack web developer. I have expertise in full-stack web development using Angular, PHP, Node JS, Python, Laravel, Codeigniter and, Other web technologies. I also love to write blogs on the latest web technology to keep me and others updated. Thank you for reading the articles.



Related Posts -

How to use/install Materialize Css with angular 2+
How to use/install Material ...

To use Materialize CSS with angular we need to use the ngx-materialize lib...



How to set dynamic page-title meta tags in angular 2/4/5/6/7/8/9/10/11
How to set dynamic page-tit ...

In this tutorial we are going to learn how to implement dynamig page meta ...



Angular Login and Registration page
Angular Login and Registrat ...

Hello, I am going to implement login and registration page design with ang...



5 Most Reliable Practices to Maintain Angular App Security
5 Most Reliable Practices t ...

Angular is one of the most famous JavaScript framework for developing sing...



Angular slider, price range selector (ngx-slider)
Angular slider, price range ...

Table of Contents ngx-sliderDemosDependenciesInstallationSample usageDoc...



Follow Us

Follow us on facebook Click Here

Facebook QR
Scan from mobile
Join our telegram channel Click Here
Telegram QR
Scan from mobile