Check out the interactive live demo
Install ngx-loading-x
from NPM using this command
npm install ngx-loading-x --save
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 AttributesAttributes | 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
DirectiveIf 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>
Attributes | Type | Required | Default | Description |
---|---|---|---|---|
bgBlur |
boolean | optional | 5 |
blurred/frosted background |
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 |
Author: silvareal
Live Demo: https://stackblitz.com/edit/ngx-loading-x
GitHub: https://github.com/silvareal/ngx-loading-x
#angular #angularjs #javascript