Loading Indicator for Blogger

LOADING ... If your page takes more than a few seconds to load, you may want to add a loading indicator to inform the visitors that page loading is still in progress. The page loading indicator is usually in some form of animated GIF. This post shows some samples of GIF images that can be used as a loading indicator.

For Blogger users, here is how to add loading indicator to your blog …


Part 1 – Span
First, you need to decide which part you want to hide while the page is loading. Some may hide the entire page while loading, showing nothing but the loading indicator. I do not recommend this, as your readers might get bored looking at an (almost) empty page.

The trick is to show something for them to look at while waiting for the full contents to appear. So, instead of hiding the entire page, we shall just hide the contents of the posts.

What we need to do is to add 2 span tags around

<p><data:post.body/></p>

, as follows:

<!-- START: Loading Indicator: Top -->
<span expr:id='"loading-" + data:post.id' style='font-size:75%;'>
  <img width='16' height='16' src='http://i74.photobucket.com/albums/i265/jennzhen/loading/CircleBall.gif' style='vertical-align:middle'/> LOADING ...
</span>
<span expr:id='"loaded-" + data:post.id' style='display:none'>
<!-- END: Loading Indicator: Top -->

<p><data:post.body/></p>

<!-- START: Loading Indicator: Bottom -->
</span>
<!-- END: Loading Indicator: Bottom -->

Part 2 – Script
The purpose of this part is to show the actual page contents after the page loading has been completed. It will also hide the loading indicator.

The script below should be placed after

<div id='blog-posts'>

, immediately before

</div>

, as follows:

<div id='blog-posts'>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == "item"'>
      <b:if cond='data:post.allowComments'>
        <b:include data='post' name='comments'/>
      </b:if>
    </b:if>
  </b:loop>

<!-- START: Loading Indicator: Script -->
<script type='text/javascript'>
window.onload=function(){
<b:loop values='data:posts' var='post'>
  document.getElementById("loading-<data:post.id/>").style.display='none';
  document.getElementById("loaded-<data:post.id/>").style.display='inline';
</b:loop>
}
</script>
<!-- END: Loading Indicator: Script -->

</div>