Ngx Loading X

Demo

Check out the interactive live demo

Getting Started

Installation

Install ngx-loading-x from NPM using this command

npm install ngx-loading-x --save

Usage

Import NgxLoadingXModule into the root of your module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CoreModule } from './core/core.module';
import { NgxLoadingXModule } from 'ngx-loading-x';
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Import NgxLoadingXModule
    NgxLoadingXModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

create a boolean variable that is accessible from the component which will contain ngx-loading-x. This boolean is used as an input into ngx-loading to determine when the loading spinner is visible.

import { Component, OnInit } from '@angular/core';

@Component({
    //...
})
export class AppComponent implements OnInit {
    //...
    public loading = false;

    constructor() { }

    ngOnInit() { }

    registerTest() {
        // loading triggered
        this.load = true;

        setTimeout(() => {
            // loader stops after 5s
            this.load = false,
            // ..
            this.register = true;
        }, 5000)
    }
}

Include ngx-loading-x component selector to your app component templates, Set the [show] input variable of ngx-loading-x to point to your boolean i.e load, which will determine the ngx-loading-x visibility.

<ngx-loading-x [show]="load"></ngx-loading-x>

ngx-loading-x component selector attributes

ngx-loading-x component selector Attributes

| Attributes | Type | Required | Default | Description | | :--- | :--- | :--- | :--- | :--- | | show | boolean | optional | false | Determines the visibility of the loader | | bgLogoUrl | string | optional | (empty string) | Logo Url | | bgOpacity | number | optional | 5 | background opacity | | bgLogoUrlPosition | number | optional | bottom-right | Logo position. available positions can be accessed via POSITION | | bgLogoUrlSize | number | optional | 100 | Logo size | | spinnerType | string | optional | wandering-cubes | Spinner animation type. available types can be accessed via SPINNER | | spinnerSize | number | optional | 120 | Spinner size | | spinnerColor | string | optional | #dd1b16 | Spinner color | | spinnerPosition | string | optional | center-center | Spinner position. available positions can be accessed via POSITION |

NgxLoadingXBlur Directive

If you want your page content is blurred/frosted while showing the loading background overlay.

<div NgxLoadingXBlur [show]="load">
  <!-- This page content will be blurred/frosted when loading background overlay is showed -->
</div>
<ngx-loading-x [show]="load"></ngx-loading-x>

Attribute

| Attributes | Type | Required | Default | Description | | :--- | :---: | :---: | :---: | :--- | | bgBlur | boolean | optional | 5 | blurred/frosted background |

Custom configuration for NgxLoadingXModule

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 { NgxLoadingXConfig, POSITION, SPINNER, NgxLoadingXModule } from 'ngx-loading-x';


const ngxLoadingXConfig: NgxLoadingXConfig = {
  show: false,
  bgBlur: 2,
  bgOpacity: 5,
  bgLogoUrl: '',
  bgLogoUrlPosition: POSITION.topLeft,
  bgLogoUrlSize: 100,
  spinnerType: SPINNER.wanderingCubes,
  spinnerSize: 120,
  spinnerColor: '#dd0031',
  spinnerPosition: POSITION.centerCenter,
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    NgxLoadingXModule.forRoot(ngxLoadingXConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

| Attributes | Type | Required | Default | Description | | :--- | :--- | :--- | :--- | :--- | | show | boolean | optional | false | Determines the visibility of the loader | | bgLogoUrl | string | optional | (empty string) | Logo Url | | bgOpacity | number | optional | 5 | background opacity | | bgBlur | boolean | optional | 5 | blurred/frosted background | | bgLogoUrlPosition | number | optional | bottom-right | Logo position. available positions can be accessed via POSITION | | bgLogoUrlSize | number | optional | 100 | Logo size | | spinnerType | string | optional | wandering-cubes | Spinner animation type. available types can be accessed via SPINNER | | spinnerSize | number | optional | 120 | Spinner size | | spinnerColor | string | optional | #dd1b16 | Spinner color | | spinnerPosition | string | optional | center-center | Spinner position. available positions can be accessed via POSITION |