Fancybox: Show loading animation while loading iframe content

Question

When using jQuery and fancybox for showing another page inside an iframe I want to show the loading animation while the page inside the iframe is loading. This is possible when using ajax to load content but I want the same thing when using iframe. Is it possible from the api to also get the loading animation while the content in the iframe is loading?

This is the code for showing the iframe in the fancybox:

var $fancybox = $("#openPopup").fancybox({
    'type': 'iframe',
    'href': "Test.php"
});

Answer 1

You can simply attach backgroung with CSS to layer below, that when iframe will be ready it will overlap your backgroung with spinner

#fancybox-outer{
    background:#fff url("$path to animation/ajax-loader.gif") no-repeat 50% 50% !important;
}

Answer 2

This worked for me:

'onComplete' : function(){
            jQuery.fancybox.showActivity();
            jQuery('#fancybox-frame').load(function(){
                jQuery.fancybox.hideActivity();
            });

        }