Use Jquery With and Iframe & Progress Indicator

I know this exists out there, somewhere but I haven't found it in a few hours of searching. I simply have to load a clients external page into an IFRAME, but I w开发者_高级运维ant to use jquery ui to present the loading image while it's grabbing the external data.

Simple yes, but I've seen pieces of this not the whole thing.

Something like this?

Live Example: http://jsfiddle.net/CPadm/

EDIT: Updated so that the iframe is hidden until loaded.

Live (updated) Example: http://jsfiddle.net/CPadm/3/

HTML

<div id="button">Click to load</div>

<iframe></iframe>

<div id='loading'>Page is loading...</div>​

CSS

iframe {
    display: none;
}
#button {
    background: blue;
    color: white;
    padding: 10px;
    width: 100px;
}
#loading {
    width: 300px;
    padding: 20px;
    background: orange;
    color: white;
    text-align: center;
    margin: 0 auto;
    display: none;
}​

jQuery

$('iframe').load(function() {
    $('#loading').hide();
    $('iframe').show();
});

$('#button').click(function() {
    $('#loading').show();
    $('iframe').attr( "src", "http://www.apple.com/");
});​

Relevant jQuery docs:

• .load() - http://api.jquery.com/load-event/
• .hide() - http://api.jquery.com/hide/
• .show() - http://api.jquery.com/show/
• .attr() - http://api.jquery.com/attr/