Loading Spinner While Iframe Loads

I had a task on a project that I'm working on and I want to blog the simple solution that I made for this task.

The project that I'm working on contains many iframes that are injected on the site, and the client is asking to display a loading spinner to show, while the iframe page content is loading.

First I started thinking that this is a not straightforward task and needed some JavaScript to be injected within the iframes execution, by attaching an event handler that will be triggered once the iframe finishes the loading.

Then I came up with a CSS trick with only 3 lines of CSS that can do the trick.

The following code will show a loading spinner until the Iframe did from loading:

  iframe {
    background-image: url("/Includes/Site/images/AjaxLoader.gif");   
    background-repeat: no-repeat;
   }