How to Add Multiple Loaders and Spinners on Angular

The ngx-ui-loader is an all-in-one, fully customizable loader/spinner for Angular applications. It’s a useful application for adding progress bars and loaders on a website. It supports foreground and background spinner/loader, indicative progress bars and multiple loaders. Here’s how it works.

npm i ngx-ui-loader

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

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

import { NgxUiLoaderModule, NgxUiLoaderRouterModule } from "ngx-ui-loader";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxUiLoaderModule, // import NgxUiLoaderModule
    NgxUiLoaderRouterModule, // import NgxUiLoaderRouterModule. By default, it will show the foreground loader.
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

NGX-UI-Loader Features to Know

Below are the features for the ngx-ui-loader:

• Support for custom template ([email protected]).
• Support for multiple loaders ([email protected]).
• Show foreground loader with progress bar.
• The page content can be blurred/frosted while showing the foreground loader. 
• Automatically show loader for router events. 
• Automatically show loader for HTTP requests. 

More on Software DevelopmentHow to Use ForkJoin in Angular With Examples

How to Apply Multiple Loaders on Angular

If you want the loader to start automatically for navigating between your app routes, go to your root AppModule and do as follows: 

First, install the library from npm:

npm i ngx-ui-loader

Then, import it inside the module:

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

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

import { NgxUiLoaderModule, NgxUiLoaderRouterModule } from "ngx-ui-loader";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxUiLoaderModule, // import NgxUiLoaderModule
    NgxUiLoaderRouterModule, // import NgxUiLoaderRouterModule. By default, it will show the foreground loader.
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

How to Automatically Show the Loader for HTTP Requests

If you want the loader to start automatically for HTTP requests, go to your root AppModule and enter the following code:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";

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

import { NgxUiLoaderModule, NgxUiLoaderHttpModule } from "ngx-ui-loader";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule, // import HttpClientModule
    NgxUiLoaderModule, // import NgxUiLoaderModule
 // If you need to show the foreground spinner, do as follows:
    NgxUiLoaderHttpModule.forRoot({ showForeground: true })
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

More on Software EngineeringReact Infinite Scroll: A Guide

How to Include the NGX-UI-Loader Component

After importing the NgxUiLoaderModule, use the ngx-ui-loader in your root app template app.component.ts:

<ngx-ui-loader></ngx-ui-loader>
<router-outlet></router-outlet>

Frequently Asked Questions

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";

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

import { NgxUiLoaderModule, NgxUiLoaderHttpModule } from "ngx-ui-loader";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule, // import HttpClientModule
    NgxUiLoaderModule, // import NgxUiLoaderModule
 // If you need to show the foreground spinner, do as follows:
    NgxUiLoaderHttpModule.forRoot({ showForeground: true })
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}