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 [e-mail]