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]
})

2. 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.