Ionic Loader
ionic-loader is an Angular.js and Ionic Framework extension. It provides the IonicLoader component to show a loading view until a process has finished. It replaces the repeated code line for showing loader every where in your application.
Installation
npm i ionic-loader
Demo
Usage
Include IonicLoaderComponent in your component where you are planning to use, if you want to use it across the application you can keep this in App component.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import {IonicLoaderComponent} from 'ionic-loader';
import { HomePage } from './home.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage, IonicLoaderComponent]
})
export class HomePageModule {}
Place bellow component where ever you need to show the loader.
<ionic-loader type="lines" color="primary" isLoading="true" message="Loading..."></ionic-loader>
All available loader types are:
"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | undefined
All available loader colors are:
"primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark"
Further help
To get more help on this library you can reach me at niranjan.devasani@gmail.com