Some weeks ago I have noticed a new loading indigator on YouTube which appears while loading a the next pages. The progress bar was only visible in one single browsing session, I assume it was an A/B test.
However I could extract the HTML and CSS code behind the fancy progress bar.
Discuss on Hacker News or Reddit
HTML:
<div><dt></dt><dd></dd></div>CSS (I have changed the colors. I can not find to original colors any more, I’m sorry):
#progress{position:fixed;z-index:2147483647;top:0;left:-6px;width:1%;height:2px;background:#0088CC;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;-moz-transition:width500msease-out,opacity400mslinear;-ms-transition:width500msease-out,opacity400mslinear;-o-transition:width500msease-out,opacity400mslinear;-webkit-transition:width500msease-out,opacity400mslinear;transition:width500msease-out,opacity400mslinear;}#progressdd,#progressdt{position:absolute;top:0;height:2px;-moz-box-shadow:#0088CC1px06px1px;-ms-box-shadow:#0088CC1px06px1px;-webkit-box-shadow:#0088CC1px06px1px;box-shadow:#0088CC1px06px1px;-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%;}#progressdt{opacity:.6;width:180px;right:-80px;clip:rect(-6px,90px,14px,-6px);}#progressdd{opacity:.6;width:20px;right:0;clip:rect(-6px,22px,14px,10px);}In order to use this progress bar in you jQuery project. You can simply register a handler which shows the progress bar at the beginning of every ajax call. And an other handler which hiddes the progress bar at the end of each call.
Javascript:
$(document).ajaxStart(function(){//only add progress bar if added yet.if($("#progress").length===0){$("body").append($("<div><dt/><dd/></div>").attr("id","progress"));$("#progress").width((50+Math.random()*30)+"%");}});$(document).ajaxComplete(function(){//End loading animation$("#progress").width("101%").delay(200).fadeOut(400,function(){$(this).remove();});});