Loading Spinner While Iframe Loads

Loading Spinner While iframe Loads

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

CALCPA contains many iframes that are injected on the site, and they need a loading spinner to show, while the iframe page content is loading.

First I thought this is a not straightforward task, and needed some JavaScript, 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 can do the trick.

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

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