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
;;;; @
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.
; @ implements OnInit //... public loading = false; { } { } { // loading triggered thisload = true; }
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
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.
<!-- This page content will be blurred/frosted when loading background overlay is showed -->
Attribute
Attributes | Type | Required | Default | Description |
---|---|---|---|---|
bgBlur |
boolean | optional | 5 |
blurred/frosted background |
NgxLoadingXModule
Custom configuration for You can override the default configuration via forRoot()
method.
;;;; const ngxLoadingXConfig: NgxLoadingXConfig = show: false bgBlur: 2 bgOpacity: 5 bgLogoUrl: '' bgLogoUrlPosition: POSITIONtopLeft bgLogoUrlSize: 100 spinnerType: SPINNERwanderingCubes spinnerSize: 120 spinnerColor: '#dd0031' spinnerPosition: POSITIONcenterCenter @
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 |