Custom configuration for NgxUiLoaderModule - t-ho/ngx-ui-loader GitHub Wiki

7. Custom configuration for NgxUiLoaderModule

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

7.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.
fastFadeOut	boolean	optional	false	Faster fade out
delay	number	optional	0	Set delay for a loader. E.g. If delay = 100, it will not show the loader in the first 100 miliseconds
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
maxTime	number	optional	-1	The maximum time a loader can be showed. It will be ignored if it <= minTime
minTime	number	optional	300	The time a loader must be showed at least before it can be stopped. It must be >= 0 millisecond.
overlayBorderRadius	string	optional	0	Overlay border radius
overlayColor	string	optional	rgba(40,40,40,.8)	Overlay background color