TheLazy.Dev
Portfolio GitHub

Blog

webdev |angular |loader |spinner

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

slika

Simi Lika

Posted on December 19, 2023

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 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
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
slika
Simi Lika

Posted on December 19, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

December 19, 2023