"loading" effect for blogspot

"Loading" effect show a process bar when page loading like picture above . This effect is very useful for website .If loading time of your website is so long ,readers may think your website was down and find another website ,but in case of adding a loading bar ,readers may think the page is being processed and keep waiting a bit till full page loaded .


There are many way to create loading effect ,in this post ,I want to introduce the easiest way :
To create loading bar ,first ,you need an animated image which show loading process like images above . Upload image to your host
add this code before </head>

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga() {
document.getElementById("imgLOAD").style.display="none";
}
</script>

Save template .
Add a HTML/Javascript widget and paste this code into widget content :

<div id="imgLOAD" style="position:fixed;top:50px;right:200px" align="right">
loading,please wait...<br/>
<img src="your image url"/></div>

top:50px;right:200px : change these value to make the loading bar showed in position you want.
your image url : url of your animated image which showed loading process .
position:fixed : it mean the loading bar is moved when you scroll page. If you want to keep loading bar at fixed position and doesn't move when you scroll page ,change this value fixed to absolute
Save template and you are done .