<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Page Load Progress bar</title> <Scriptsrc= "/scripts/jquery-1.10.2.min.js"type= "Text/javascript"></Script> <Scripttype= "Text/javascript"> varloadprocess= function(config) {varCount= 0; varID=config.id; varDivtxt= "#"+ID; $("Body"). prepend ('<div id= "' +ID+ '"style=" width:0%; height:5px; background:green; "></div>' ); /*Update progress bar*/ This. Updateprocess= function(percent) {setTimeout (function() {$ (divtxt). Animate ({width:percent+ "%" }) }, ++Count* -); if(Percent== -) { /*100% Remove loading tags from the page*/SetTimeout (function() {$ (divtxt). Hide ( -); SetTimeout (function() {$ (divtxt). Remove ()}, -); }, Count* - + -); } }; } </Script> <style>Body{margin:0px;} </style></Head><Body><Divstyle= "border:1px solid red;width:100%; height:100px;">Content .....</Div></Body><Scripttype= "Text/javascript"> /*need to be placed behind the body tag and then call the Updateprocess method at the appropriate location*/ varP= Newloadprocess ({"ID":"Loading"}); P.updateprocess ( -); P.updateprocess ( $); P.updateprocess ( -); P.updateprocess ( -); P.updateprocess ( the); P.updateprocess ( -);</Script></HTML>
JS Page Top progress bar Demo