Sometimes, It is necessary to create progress bar or loader to show user that something happening in the background. Loader/loading icons are good way to do this but If you want your user to show actual progress then something else is needed. A progress bar which shows how much task has been completed and how much left.
Gmail has done some remarkable job in this. Since, Gmail loader is simple and elegant in looks. And, It is really simple to create a Gmail like loader.
What you need is two divs. One div will treated like container, which will filled by other div to show progression of the task. So, outer div will contain border only and shows totality of the task, where as internal div will contain background color, it will give sense of filling the outer div. And, when some part of task happened we will increase this inner div’s size. So that, it fills outer div and give sense to user that we had done something and hence increase the progress.
Here is the example to do Gmail like loading feature,
<!DOCTYPE>
<html>
<head>
<title>Gmail like loader</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function callMe(inc)
{
inc</span> = inc || 10
var w = parseInt((parseInt($("#inner").css("width"))/parseInt($("#inner").parent().css("width")))*100)+ inc;
$("#inner").width(w+"%");
if(w>100)$("#inner").width(0);
}
$(document).ready(function(){
var id = setInterval(callMe,1000);
});
</script>
</head>
<body>
loading...
<div id="outer" style="border:1px solid;width:200px;height:10px;overflow:hidden;">
<div id="inner" style="background-color:#0F67A1;height:100%;width:0%;"/>
</div>
</body>
</html>
I had two divs, outer and inner. outer had border and inner had background color. In outer we had used overflow:hidden to hide inner div progression if it increases beyond 100% (length/width of the outer div). I had to use interval to show some progress.
Update: Demo
http://jsfiddle.net/gagan/62CZZ/embedded/result/
Gagan's Blog 