NgxAngularLoader

• It's a Simple Loading Animation Componenet which you can show before loading actual content to keep user engaged.
• You can also customize it's size and text.
• It is developed using Angular >=6.0.0.

Installation

npm i ngx-angular-loader

API

import { NgxAngularLoaderModule } from 'ngx-angular-loader'
selector: ngx-angular-loader

@Inputs()

Input	Type	Required	Description
size	number	Optional, default: 100	Size of Loader circle.
loadingText	string	Optional, default: 'Loading...'	a string value for Loading Text

Usage

1. Import the NgxAngularLoaderModule in your app module.

   import { NgxAngularLoaderModule } from 'ngx-angular-loader''

@NgModule({
 declarations: [AppComponent],
 imports: [BrowserModule, NgxAngularLoaderModule],
 providers: [],
 bootstrap: [AppComponent]
})

1. Use the Loader component <ngx-angular-loader> as you require to show the loader.

 
<div *ngIf="isFalse; else spinner">
  <p>Page Data here....</p>
</div>
 
<ng-template #spinner>
  <ngx-angular-loader
    loadingText="Please wait..."
    size="200"
  ></ngx-angular-loader>
</ng-template>
 

Credits

I want to thanks entire Angular team for creating this awesome framework.