Designing large applications that will run on slow networks, I decided to add a small loading gif that appears ever time a user clicks on a link.
Some of the not-so-technical end-users of our applications do not have the habit that of looking at the loading icon on the toolbar of the browser that changes from the curved Refresh arrow to a Cancel button when a page loads. Instead they sit in frustration clicking and clicking on a button or link. But they seem to be more rest-assured that their instruction is being carried out, if there is a loading icon on the main screen (even the if the loading gif does nothing). So to improve user experience, I add a loading gif show/hide function to my projects.
The Link:
<a href="index.html" onclick="show_lgif();">Go Big</a>CSS:
<style>
/*to hide stuff*/
.null {display:none;}
/*to size and position the box*/
.top_and_center{
position: fixed;
top: 15%;
left: 40%;
width: 20%;
height: auto;
background: #FFF;
box-shadow: 3px 4px 5px #EEEEEE;
border: 2px solid #F0F0EE;
padding-top:5px;
}
.big {font-size:150px; background:#0f0f0f; color:#fefefe;}
.bold {font-weight: bold;}
.dauto {float:left; overflow: hidden; width:auto;}
</style>
HTML:
<a href="http://blinkwiki.com" onclick="show_lgif();">Go Big</a>
<div id="div_sys_wait" class="null top_and_center">
<div class="dauto"><img src="l.gif"></div>
<span class="bold">now loading</span><br>please wait . . .
</div>
<hr>
<div class="big" align="center"><span class="bold" style="color:red;">BLINK</span>/WIKI</div>
JavaScript:
<script>
function show_lgif()
{
// change the classname of the loading div container
div_sys_wait.className = 'top_and_center';
}
</script>