Load Iframe with spinner

Question

This code loads correctly the spinner, but how do I hide it after loading completes?

iframe {
    background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

Answer 1

As an alternative solution, you can do this as well:

    <div id="spinner">
        <div>
             <img src="http://www.ajaxload.info/images/exemples/25.gif" />    
        </div>
    </div>
    <iframe border=0 name=iframe src="http://www.w3schools.com" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('spinner').style.display='none';"></iframe>

Style the position of the spinner absolute to the page container to center it appropriatedly

Answer 2

Try jQuery:

 $( document ).ready(function() {
    $( "iframe .load" ).hide();
  });

and create a second css-class for the loading-action:

    .load{
            background-image: url("http://jimpunk.net/Loading/wp-content/uploads/loading2.gif");   
            background-repeat: no-repeat;
            background-position: 50% 50%;
            position: absolute;
            width:100%;
            height:100%;
        }

iframe{
         position:relative;
        }

Let me know if it works.

Answer 3

Here it is, using font-awesome and jQuery:

$(document).ready(function () {
    showSpinnerWhileIFrameLoads();
});

function showSpinnerWhileIFrameLoads() {
    var iframe = $('iframe');
    if (iframe.length) {
        $(iframe).before('<div id=\'spinner\'><i class=\'fa fa-spinner fa-spin fa-3x fa-fw\'></i></div>');
        $(iframe).on('load', function() {
            document.getElementById('spinner').style.display='none';
        });
    }
}