How to display a loading indicator/spinner in Ionic 2 apps using LoadingController

The user experience is considered as a very important factor for a successful mobile application . Among things that constitute a good user experience is visual feedback which means your users are getting feedback of what is going on with your app every time your app is working on some UI blocking task .

For example if you app is getting some data from a remote database (which may take a significant time ) then you should display some visual indicator which tells your users to wait for data to be completely received and in the same time block the UI to prevent users from repeating actions or otherwise they may repeat actions that may cause the app to malfunction instead of waiting the completion of current task .

Ionic 2 has a built in service for blocking UI and giving visual feedback to users when the app is executing some time consuming activity on background such as loading data from a remote database .

You simply use the LoadingController which is available from ionic-angular module

So start by importing LadingController

import { LoadingController } from 'ionic-angular';

Then inject it on the class constructor

constructor(public loadingController:LoadingController){...}

    let loading = this.loadingController.create({content : "Logging in ,please wait..."});
    loading.present();
    this.auth.login('basic', {'email':this.email, 'password':this.password}).then(()=>{
        loading.dismissAll();
    });

When you are successfully logged in the method dismissAll() hides the loading indicator so you can continue interacting with your app normally .

Read the official Ionic 2 docs for LoadingController

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status