Ionic 4/3 | Android like Loader Spinner Dialog with Title and Message

In this post, we will discuss How to Implement Native like Loader Spinner with Title and message. We already have Ionic component to show spinner with customized spinners. But to make an Ionic application look more like native we can add loading spinners as we see in Android app using Ionic Native plugin.

We will create a new app to demonstrate implementation of Native-like spinner in Ionic Application in few steps.

Also Read: Ionic 4 | Adding Ion Loading Web Component in Ionic 4 Angular Application without Native Plugin

Create a new Ionic App using below CLI command

Install Cordova and Ionic Native plugin

 

Next, we need to import plugin in app’s module file

In app.module.ts file add SpinnerDialog like below

 

In the Home Component and template make following changes to use Spinner Loader

home.page.ts

 

Use  this.spinnerDialog.show();  to show spinner in center without any message and  this.spinnerDialog.hide();  to hide it.

We have three parameters to show Title, Message and Third one is a boolean which can be set to true and false to dismiss on touch or not.

this.spinnerDialog.show(“title”, “message”, true);
You can check more details here for the options in IOS as well.

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of