Custom configuration for NgxUiLoaderModule

6. Custom configuration for NgxUiLoaderModule

6.1 Usage

You can override the default configuration via forRoot() method.

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

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

import { NgxUiLoaderModule, NgxUiLoaderConfig, SPINNER, POSITION, PB_DIRECTION } from 'ngx-ui-loader';

const ngxUiLoaderConfig: NgxUiLoaderConfig = {
  bgsColor: 'red',
  bgsPosition: POSITION.bottomCenter,
  bgsSize: 40,
  bgsType: SPINNER.rectangleBounce, // background spinner type
  fgsType: SPINNER.chasingDots, // foreground spinner type
  pbDirection: PB_DIRECTION.leftToRight, // progress bar direction
  pbThickness: 5, // progress bar thickness
};

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    // Import NgxUiLoaderModule with custom configuration globally
    NgxUiLoaderModule.forRoot(ngxUiLoaderConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6.2 Parameters of forRoot() method

Parameter	Type	Required	Default	Description
bgsColor	string	optional	#00ACC1	Background spinner color
bgsOpacity	number	optional	0.5	Background spinner opacity
bgsPosition	string	optional	bottom-right	Background spinner postion. All available positions can be accessed via POSITION
bgsSize	number	optional	60	Background spinner size.
bgsType	string	optional	ball-spin-clockwise	Background spinner type. All available types can be accessed via SPINNER
fgsColor	string	optional	#00ACC1	Foreground spinner color
fgsPosition	string	optional	center-center	Foreground spinner position. All available positions can be accessed via POSITION
fgsSize	number	optional	60	Foreground spinner size.
fgsType	string	optional	ball-spin-clockwise	Foreground spinner type. All available types can be accessed via SPINNER
logoPosition	string	optional	center-center	Logo position. All available positions can be accessed via POSITION
logoSize	number	optional	120	Logo size (px)
logoUrl	string	optional	(empty string)	Logo url
pbColor	string	optional	#00ACC1	Progress bar color
pbDirection	string	optional	ltr	Progress bar direction. All direction types can be accessed via PB_DIRECTION
pbThickness	number	optional	3	Progress bar thickness
hasProgressBar	boolean	optional	true	Show the progress bar while loading foreground
text	string	optional	(empty string)	Loading text
textColor	string	optional	#FFFFFF	Loading text color
textPosition	string	optional	center-center	Loading text position. All available positions can be accessed via POSITION
blur	number	optional	5	Blur the page content while showing foreground loader. Only applied when using ngxUiLoaderBlurred directive.
gap	number	optional	24	The gap between logo, foreground spinner and text when their positions are center-center
masterLoaderId	string	optional	master	The default value for master's loaderId
overlayBorderRadius	string	optional	0	Overlay border radius
overlayColor	string	optional	rgba(40,40,40,.8)	Overlay background color
threshold	number	optional	500	The time a loader must be showed at least before it can be stopped. It must be >= 1 millisecond.