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/frostedwhile 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>
Top comments (0)