Show spinner while loading an iframe in a facebox

Question

I am using jQuery facebox to open a new window for authenticating Facebook users with Devise/Omniauth in my rails app.

At first I wanted to simply load this in a div like so:

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

But the problem is that this will not work because there are multiple redirects. The first link opens /auth/facebook, which redirects to graph.facebook.com, which redirects back to my callback url, which finally redirects to a confirmation page. I need to display the confirmation page to the user. The way I have it working right now is by opening an external window like this:

$('#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 

Is there a way for me to open a new window and load its contents in the facebox? Or is there a better approach?

Edit

Thanks to Jared's suggestion I was able to do this using an iFrame mod from here. See this jsFiddle. However I would like to show the loading spinner while the iframe content is loading. Is this possible? According to the documentation, the way to do it normally is like this:

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

But I'm not sure how to do this with the iframe mod.

Answer 1

try this css trick.. is this what you are trying to do?

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