Utilice Jquery con el indicador de Iframe & Progress

Question

Sé que existe en alguna parte, pero no lo he encontrado en unas pocas horas de búsqueda. Simplemente tengo que cargar una página externa de clientes en un IFRAME, pero quiero usar jquery ui para presentar la imagen de carga mientras está tomando los datos externos.

Simple, sí, pero he visto piezas de esto no del todo.

Answer 1

¿Algo como esto?

Ejemplo vivo:http://jsfiddle.net/CPadm/

EDIT: Actualización de modo que el iframe se podrá ver hasta cargado.

vivo (actualizado) Ejemplo: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/"); 
});​ 

---

relevantes documentos jQuery:

• .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/