title: How do I add a loading indicator to my page while my iframe loads?
body: <p>I am currently creating a page where upon clicking a link an iframe is inserted into a div and it's contents loaded. I do this using the following jQuery call:</p>
  
  <pre><code>$('#mydiv').html('&lt;iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"&gt;&lt;/iframe&gt;');
  </code></pre>
  
  <p>Sometimes the source content loads <em>very</em> slowly and, as a result, it looks like nothing is happening. I would like to have a simple loading animation while the content is loading while the iframe's content loads. When the iframe finishes loading it's content should pop in and the loading animation should go away.</p>
  
  <p>I've been considering a couple ways I could do this (e.g. having a separate loader div to simply swap the two in and out) but I'm not sure of what the 'best' approach to solving this problem is. Perhaps I shouldn't be using .html()? I'm open to suggestion if there is a more correct solution.</p>