CODEWITHSUNDEEP
ionic-frameworkionic2spinnerionic3loader
Niraj
Niraj

Reputation: 1169

How to implement spinner with loading controller in ionic 3?

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

enter image description here

I want something like this

enter image description here

Upvotes: 8

Views: 17640

Answers (2)

Manveer Singh
Manveer Singh

Reputation: 357

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.

Upvotes: 3

Mohan Gopi
Mohan Gopi

Reputation: 7724

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 imag

Upvotes: 9

Related Questions