Ionic 4 | Adding Ion Loading Web Component in Ionic 4 Angular Application

Like the native Android apps, we can show Loader with a loading animation and a message in Ionic Application using ion-loading component. Here we will implement ion-loading using Ionic’s latest CLI version 4.12.0 with Ionic 4.1 Hydrogen which is the latest stable release now.

Using Loader in the application is very useful and makes application usability more convenient from a user point of view. It creates an overlay to block other user interactions. We can show a loader to indicate if some process is going on like getting data from server or file copy, paste events etc. Using Ionic loader gives use message parameter using which we can also show a message indicating the process going on.

Also Read: Ionic 4 Spinner Using Ionic Native Plugin

In this post, we will implement Ion-loading component in Ionic 4 Angular application and also discuss option available. Ionic loading component is available in @ionic/angular so we don’t need to use any plugin for that. We simply need to import LoadingController in component or service.

Also Read: Show Loader Spinner on HTTP Request using Interceptors in Ionic 4

We have two methods available create and dismiss, these return promises as callbacks. In the create method we can define various options available.

The dismiss method is called to hide loader, if don’t add duration option in create method then need to call dismiss method to hide loader. It also has the onDidDismiss function which is called after-loader is dismissed.

In some situations, we may need separate show & hide loader methods like in server API calls.

Options available:

message: Text to show on the loader with a spinner.
duration: Time in milliseconds to autohide loader, if we don’t add this loader will not hide then we can call dismiss method.
spinner: We can change the default spinner style to any other one from this available style.

lines

lines-small

bubbles

circles

crescent

dots” or

null

backdropDismiss: If this is set to the true user can dismiss loader by tapping anywhere.

cssClass: We can customize loader by adding a class

In global.scss add the following style

That’s it you can test Ion loader in the browser by running the follwoign command

Ion-loader component is very to use and adds more value to users in the application.

 

 

One thought on “Ionic 4 | Adding Ion Loading Web Component in Ionic 4 Angular Application”

Leave a Reply

Your email address will not be published. Required fields are marked *