NGX-UI-LOADER: Multiple loaders, spinners, and progress bar for Angular application.

ngx-ui-loader

An all-in-one and fully customizable loader/spinner for Angular applications. It supports foreground, background spinner/loader, indicative progress bar, and multiple loaders.

Features

• Support custom template (>= ngx-ui-loader@9.1.0).
• Support multiple loaders (>= ngx-ui-loader@7.1.0).
• Show foreground loader with progress bar
• The page content can be blurred/frosted while showing the foreground loader. See NgxUiLoaderBlurred directive NgxUiLoaderBlurred directive for more details
• Automatically show loader for router events. See NgxUiLoaderRouterModule for more details
• Automatically show loader for HTTP requests. See NgxUiLoaderHttpModule for more details

NgxUiLoader

Usage

If you want the loader to start automatically for navigating between your app routes, in your root AppModule, do as follows:
First, let us install the library from npm:

npm i ngx-ui-loader

Then it is time to 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 {}

Automatically show loader for HTTP requests

If you want the loader to start automatically for HTTP requests, in your root AppModule, do as follows:

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

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