Fancybox: Show loading animation while loading iframe content

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;
}

This worked for me:

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

        }

I had the same question. Here's how I implemented a solution to the problem after reading Steve's answer.

HTML:

<a id="myLink" href="/slow-loading-url">My Link</a>

JavaScript:

$(document).ready(function() {

    $("#myLink").click(function(event) {
        $.fancybox.open(this.href, {type: "iframe"});
        $.fancybox.showLoading();
        $("iframe.fancybox-iframe").load(function() {
            $.fancybox.hideLoading();
        });
        event.preventDefault();
    });

});

Of course this won't work for external URLs with the X-Frame-Options HTTP header set. For example https://www.google.com.au/.