Mostrar spinner durante la carga de un iframe en un facebox

Question

estoy usando jQuery facebox para abrir una nueva ventana para la autenticación de los usuarios de Facebook con Devise/Omniauth en mi rieles aplicación.

Al principio quería simplemente cargar esto en un div, así:

$('#facebook-auth').live 'click', ->  
    $.facebox '<div id="foo"></div>' 
    $('#foo').load $(this).attr 'href' 
    false 

Pero el problema es que esto no funcionará porque hay múltiples redirecciones. El primer enlace abre /auth/facebook, que redirige a graph.facebook.com, que redirige de nuevo a mi URL de devolución de llamada, que finalmente se redirige a una página de confirmación. Necesito mostrar la página de confirmación al usuario. La forma en que lo tengo trabajando en este momento está abriendo una ventana externa como esto:

$('#facebook-auth').live 'click', -> 
    width = 600 
    height = 400 
    left = (screen.width/2) - (width/2) 
    top = (screen.height/2) - (height/2) 
    window.open $(this).attr('href'), 'authPopup', "menubar=no,toolbar=no,status=no,width=#{width},height=#{height},toolbar=no,left=#{left},top=#{top}" 
    false 

¿Hay alguna manera de abrir una nueva ventana y cargar su contenido en el facebox? ¿O hay un mejor enfoque?

Editar

Gracias a la sugerencia de Jared que era capaz de hacer esto usando un mod marco flotante de here. Ver this jsFiddle. Sin embargo, me gustaría mostrar el spinner de carga mientras se carga el contenido del iframe. es posible? Según la documentación, la manera de hacerlo es normalmente así:

$(".badge").live "click", -> 
    $.facebox -> 
    $.get "page.html", (data) -> 
     $.facebox data 
    false 

, pero no estoy seguro de cómo hacer esto con el mod iframe.

Answer 1

intentar este truco css .. es esto lo que está tratando de hacer?

http://jsfiddle.net/7CBjn/3/

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

Answer 2

Bueno, es probable que pueda mostrar una ruleta, a continuación, comprobar constantemente si un iframe terminado de cargar, o utilizar controlador de eventos onload del marco flotante.

No del todo seguro de cómo va a trabajar con redirecciones, pero usted podría intentar algo bajo como that.