ngx-spinner

What is ngx-spinner?

ngx-spinner is an Angular library that provides a variety of customizable loading spinners to indicate the loading state of a web application. It is easy to integrate and offers a wide range of spinner types and configurations.

What are ngx-spinner's main functionalities?

Basic Spinner

This feature allows you to add a basic spinner to your Angular application. You can customize the background color, size, color, and type of the spinner.

<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple"></ngx-spinner>

Conditional Spinner

This feature allows you to display the spinner conditionally based on a boolean variable. In this example, the spinner will be shown only when `isLoading` is true.

<ngx-spinner *ngIf="isLoading" bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple"></ngx-spinner>

Custom Template

This feature allows you to use a custom template for the spinner. You can place any HTML content inside the ngx-spinner tag to create a custom loading indicator.

<ngx-spinner><div class="custom-spinner-template">Loading...</div></ngx-spinner>

Spinner Service

This feature provides a service to control the spinner programmatically. You can use the `show` and `hide` methods of the `NgxSpinnerService` to display or hide the spinner.

import { NgxSpinnerService } from 'ngx-spinner';

constructor(private spinner: NgxSpinnerService) {}

showSpinner() {
  this.spinner.show();
}

hideSpinner() {
  this.spinner.hide();
}

Other packages similar to ngx-spinner

ngx-loading

ngx-loading is another Angular library for displaying loading indicators. It offers similar functionalities to ngx-spinner but with a different set of customization options and spinner types.

angular-loading-bar

angular-loading-bar is a package that provides a loading bar at the top of the page instead of a spinner. It is useful for indicating the loading state of HTTP requests and offers a different visual approach compared to ngx-spinner.

ng2-loading-spinner

ng2-loading-spinner is a lightweight Angular library for adding loading spinners. It offers basic spinner functionalities and is simpler compared to ngx-spinner, making it suitable for projects with minimal loading indicator requirements.

README

ngx-spinner

Installation

To install ngx-spinner, run:

$ npm install ngx-spinner --save

Usage

Once you successfully installed library by runnig above command, now import required files in your AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import library module
import { NgxSpinnerModule, NgxSpinnerService } from 'ngx-spinner';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify library as an import
    NgxSpinnerModule
  ],
  providers: [NgxSpinnerService], // Provide spinner service to hide/show spinner
  bootstrap: [AppComponent]
})
export class AppModule { }

Once you imported module and service, you can use its hide/show method of service in your AppComponent:

import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
class AppComponent implements OnInit {
  constructor(private spinner: NgxSpinnerService) { }

  ngOnInit() {
    this.spinner.show(); // Call this method to show spinner

    this.spinner.hide(); // Call this method to hide spinner
  }
}

Now use selector in your app.component.html

<!-- You can now use library component in app.component.html -->
<ngx-spinner></ngx-spinner>

License

MIT © Yuvraj Chauhan