Show spinner when a iframe isn't fully loaded


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:

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


ngOnInit() {

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




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...'

    // Call the loading screen

    // To dismiss the loading screen

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.


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


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