In this article, we will create a loading spinner component with ngx-spinner in angular application. ngx-spinner in angular provides a loading spinner component that we can use to display during any API call or any operation that takes time.

Let’s start building our Angular application and install this ngx-spinner to show the loading spinner.

Set Up Angular Project

First, install angular globally on your computer by running this command.

npm install -g @angular/cli

Now, create a new Angular project using the Angular CLI commands.

ng new ngx-spinner-demo
cd ngx-spinner-demo

Install ngx-spinner in Angular application

Install the ngx-spinner package using the npm command

npm install ngx-spinner --save

Configure ngx-spinner

To Configure ngx-spinner you need to open the app.module.ts file and import the modules that are important for ngx-spinner to work.

Also include BrowserAnimationModule for animation, because this loading spinner will use the animations.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // Import this
import { NgxSpinnerModule } from 'ngx-spinner'; // Import ngx-spinner module

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Add this line
    NgxSpinnerModule, // Add this line
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Use ngx-spinner in a Component

To use the ngx-spinner inside your app.component.ts file, you can import the NgxSpinnerService and with a click of a button, you can call the method this.spinner.show() to load the spinner

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showSpinner()">Show Spinner</button>
  `,
})
export class AppComponent {
  constructor(private spinner: NgxSpinnerService) {} // Inject NgxSpinnerService

  showSpinner() {
    this.spinner.show(); // Show spinner

    // Simulate an asynchronous operation (e.g., fetching data)
    setTimeout(() => {
      this.spinner.hide(); // Hide spinner after operation is done
    }, 3000); // Simulated delay of 3 seconds
  }
}

Add Styles for ngx-spinner

Inside your styles.css file, you have to add the below CSS code to design this loading spinner.

.spinner-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Run the Application

Now, after all things are done, you just have to run this command and your application is ready to load.

ng serve

Now open this link http://localhost:4200 in your browser.

Click on the “Show Spinner” button and you can see the ngx-spinner in action.

Super Easy! Right?

If you face any issues, just comment. Happy Coding 🙂