How to use ngx-spinner in Angular to create a loading spinner for smoother user interactions

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 🙂

Related Posts

angular change detection techniques

Understanding Angular Change Detection for Beginners | Angular 17 Change Detection Methods

Understanding how the Angular change detection technique helps in the process of building dynamic and responsive web applications. In this article, we’ll explore some essential concepts of…

TypeScript Strategies for Angular, Explaining Best Practices and Techniques

Angular has fully embraced TypeScript as its primary development language, a decision that has evolved into a widely accepted standard practice. TypeScript introduces robust features for static…

Unlocking the Future of Web Development: A Deep Dive into Angular 17 Features

Angular 17, the powerhouse in the realm of JavaScript frameworks, celebrated its 13th anniversary recently. From its inception with AngularJS, the framework has continuously evolved to meet…

angular-icon

Master AngularFire2 and Angular by building a CRUD operation app

In this article, we are creating a CRUD application with angularFire2 and angular, This module basically provides direct access to the Firebase database, and by using angular…

angular-icon

Master Angular NgRx by creating a To-Do Application

In this article we are building a todo application using Angular NgRx, NgRx is used for state management in angular applications. Let’s start by creating a new…

chart-js-angular

How to use Chart.js version 2 & 3 in angular application | Create line, bar, pie, and other important types of charts using chart js angular application

Chart.js library is open-source to create interactive and beautiful charts for your angular application. These charts are not just static charts, these are data-driven charts. Using the…

Leave a Reply

Your email address will not be published. Required fields are marked *