This code was used to test for a third-party booking system iframe, upon loading the availability, remove the loading animation and show iframe availability results.

Showing loading animation until iFrame loads

HTML ----


	<div class="container well checking" style="max-width:700px">

		<h3>We are now searching for your desired availability</h3>

		<img src='images/loading.svg' alt='Loading availability' width='120' height='120'>
    // loading.svg made at: http://loading.io/

	</div>



	<div class="container well iframe" style="max-width:700px">

		<?php

			echo '<iframe id="booking-iframe" src="xxx" width="100%" scrolling="no" style="border:0;"></iframe>';

		?>

	</div>
  
  
  
  
css ----
body.book-now .container.well.iframe {display: none;}
body.book-now .container.well.checking {text-align: center;}




jQuery ----
		$('iframe#booking-iframe').on('load', function() {

			$('body.book-now .container.well.iframe').show();

			$('body.book-now .container.well.checking').hide();
      
		});