I would like to create a progress bar - Need recommendations!

[confused and dazed]

Hello internet, I have created a webpage that has to load quite a few elements before it will display. How do I keep the site from showing the individual elements being loaded, just show an initial progress bar when then go to my site, and finally once the progress bar is complete show my full site? Your recommendations on where to start would be great!

[justsomeguy]

A true progress bar is difficult because you need to keep polling everything that is loading to see how much of it has loaded. I'm not sure if there is great support for that in Javascript. This is how I do a loading page for our biggest application to show it loading the Javascript files:

<div id="loading-mask" style=""></div><div id="loading">  <div class="loading-indicator"><img src="images/loading.gif" style="margin-right:8px; float:left; vertical-align:top; width: 32px; height: 32px;"><div id="loading-msg">Loading...<br><div id="loading-status"></div></div></div></div><script type="text/javascript">document.getElementById("loading-mask").style.display = "block";document.getElementById("loading").style.display = "block";</script><script type="text/javascript">document.getElementById("loading-status").innerHTML = "Loading base components";</script><script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script><script type="text/javascript">document.getElementById("loading-status").innerHTML = "Loading core API";</script><script type="text/javascript" src="ext/ext-all<?php if (LMS_DEBUG) echo '-debug'; ?>.js"></script><script type="text/javascript">Ext.namespace("app");</script><script type="text/javascript">document.getElementById("loading-status").innerHTML = "Loading extensions";</script><script type="text/javascript" src="include/ext-basex<?php if (LMS_DEBUG) echo '-debug'; ?>.js"></script><script type="text/javascript" src="include/language.js"></script><script type="text/javascript" src="include/patch<?php if (LMS_DEBUG) echo '-debug'; ?>.js"></script><script type="text/javascript">document.getElementById("loading-status").innerHTML = "Loading LMS base";</script><script type="text/javascript" src="include/lms<?php if (!LMS_DEBUG) echo '-min'; ?>.js"></script><script type="text/javascript" src="include/custom.js"></script><script type="text/javascript" src="include/user-lang.js.php"></script><script type="text/javascript">document.getElementById("loading-status").innerHTML = "Initializing";</script><script type="text/javascript">Ext.onReady(app.lms.init, app.lms);</script>

With this CSS to show the loading mask elements:

    #loading-mask{	  position:absolute;	  left:0;	  top:0;	  width:100%;	  height:100%;	  z-index:20000;	  background-color:white;	  display: none;    }    #loading{	  position:absolute;	  left:45%;	  top:40%;	  padding:2px;	  z-index:20001;	  height:auto;	  display: none;    }    #loading a {	  color:#225588;    }    #loading .loading-indicator{	  background:white;	  color:#444;	  font:bold 13px tahoma,arial,helvetica;	  padding:10px;	  margin:0;	  height:auto;    }    #loading-msg {	  float: left;	  margin-top: 8px;	  font:bold 13px tahoma,arial,helvetica;    }    #loading-status {	  float: left;	  font:normal 11px tahoma,arial,helvetica;    }

That uses ExtJS, and Ext.onReady is just a wrapper for window.onload. The first thing the init function does is to remove the loading-mask and loading elements.