How to implement spinner with loading controller in ionic 3?

Question

I want to implement spinner with loading controller in ionic3 . I have implemented simple loading controller . how to do it? thanks in advance.

My current loader

I want something like this

I want something like as in "Show Custom" option , but unable to find source code. I have already implemented simple loader . https://ionicframework.com/docs/api/components/loading/LoadingController/ — Niraj, Sep 19 '17 at 19:17
@Sampath there is no any issue , i just want to improve user experience. i have uploaded images of my current loader and what i want. i am unable to find what attributes to add here to get that. what to do within it- let loader = this.loading.create({ content: 'Loading Products...', }); — Niraj, Sep 19 '17 at 20:06
Check this answer https://stackoverflow.com/a/44111306/1116320 — HaseebR7, Sep 19 '17 at 23:35

Mohan Gopi · Accepted Answer · 2017-09-21T07:51:00.547

9

presentLoadingCustom() {
    let loading = this.loadingCtrl.create({
      spinner: 'hide',
      content: `<img src="assets/img/gif.gif" />`,
      duration: 5000
    });

    loading.onDidDismiss(() => {
      console.log('Dismissed loading');
    });

    loading.present();
  }

inside image tag give some gif image and it works fine i have tested it

Output

edited Sep 21 '17 at 07:51

answered Sep 20 '17 at 09:21

Mohan Gopi

7,606
17
66
117

do i have to put tag in html and write some css for using it ? – Niraj Sep 21 '17 at 07:15
https://drive.google.com/open?id=0B09yT3sAy4UtbWU2X0ozM3pNZTg here is how it looks. – Niraj Sep 21 '17 at 07:41
@Niraj please check my updated answer and if you want any gif image https://giphy.com/gifs/mashable-3oEjI6SIIHBdRxXI40 save this gif image locally and place it in assets folder and everything works fine – Mohan Gopi Sep 21 '17 at 07:48
thanks, its working when putting images - let loader = this.loading.create({ spinner: 'hide', content: ``, duration: 5000 }); – Niraj Sep 21 '17 at 07:51
i am glad that it helped you – Mohan Gopi Sep 21 '17 at 07:51
add this option too dismissOnPageChange: true – aimme Dec 05 '17 at 18:34

score 3 · Answer 2 · answered May 06 '18 at 12:56

Ionic 2&3 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 create a property and inject it on the class constructor

export class LoginPage {
loading: any;
constructor(public loadingController:LoadingController){...}
}

and create loading indicator in method from where requesting the data

login() {
    this.loading = this.loadingController.create({ content: "Logging in ,please wait..." });
    this.loading.present();
    this.errors = "";
    //api service call
    this.authService.postData(this.userData, 'api/account/login').then((result) => {
      this.responseData = result;
      if (result != null) {
        this.loading.dismissAll();
        //console.log(result);
        this.common.setLocalData(DataKey.User.toString(), result);

        this.navCtrl.push(TabsPage);
      }
      else {
        this.loading.dismissAll();
        this.errors = "Nope, Try Again";
      }
    }, (err) => {
      this.loading.dismissAll();
      this.errors = "Nope, Try Again";
      // Error log
    });
  }

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

do we need to use the create function inside every pages we make in ionic? Can't we make a global provider and just make two function like show() and hide()? — Kunal Kakkad, Nov 21 '18 at 06:47

How to implement spinner with loading controller in ionic 3?

2 Answers2