Show spinner when a iframe isn't fully loaded

Ionic Framework ionic-v3
1

How can i create a little spinner who loads in the screen and not dissapears until the iframe it’s fully loaded?

I’m using jquery in a lot of elements and i want to show that if the iframe is loading… I think i can’t do it all in the same (load) because this load will close too much fast

I tried with this but it doesn’t works:

<ion-content>
    <iframe name="chatFrame" src="http://..." (load)="dismissLoading()"></iframe>
</ion-content>
And in your component class :

loading;

ngOnInit() {
    this.presentLoading();
}

presentLoading() {
    this.loading = this.loadingCtrl.create({
       content: 'Please wait...'
    });

    loading.present();
}

dismissLoading(){
    this.loading.dismiss();
}
2

I am currently using following way to show/hide loading screen -

import { Loading, LoadingController } from 'ionic-angular';

export class YourPage {
    loading: Loading;

    constructor(private loadingCtrl: LoadingController) { }

    public showLoading() {
        this.loading = this.loadingCtrl.create({
          content: 'Please wait...'
        });
        this.loading.present();
    }

    // Call the loading screen
    this.showLoading();

    // To dismiss the loading screen
    this.loading.dismiss();
}

Documentation link.

Note - You can call the showLoading() function as many time you want. And this will add overlay screen on top of another. So make sure to close/dismiss previous one.

3

I know how to call loading controller. My doubt it’s about to load/dismiss when a iframe is fully loaded

4

Then you need to trigger event soon after iFrame gets loaded.
Look at this solution.