Webgl

gistfile1.txt

Strip all the display code from unity progress.js until you’re left with:

function UnityProgress (dom) {
  this.progress = 0.0;
  this.message = "";
  this.dom = dom;
  var parent = dom.parentNode;
  this.SetProgress = function (progress) { 
    if (this.progress < progress)
      this.progress = progress;
    this.Update();
  }
  this.SetMessage = function (message) { 
    this.message = message; 
    this.Update();
  }
  this.Clear = function() {
  }
  this.Update = function() {
  }
  this.Update ();
}
Next we make the html + css progress display. The things I find pretty necessary are:

A Loading Bar
A Loading bar background
Progress update text (“X/Y downloaded” etc)
All wrapped in its own div in index.html, just after the canvas:

<div id="loadingBox">
  <div id="bgBar"></div>
  <div id="progressBar"></div>
  <p id="loadingInfo">Loading...</p>
</div>
Add some styling (inline or in the header or linked in a separate file). I’ll go with a style that fits into a full browser window template. First we centre the whole box:

div#loadingBox {
  width: 100%;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}
Then sort out the sizing, colouring and positioning of the loading bars:

div#bgBar {
  position: absolute;
  width: 200px;
  margin-left: -100px;
  left: 50%;
  height: 2px;
  display: block;
  background-color: #333;
}
div#progressBar {
  left: 50%;
  position: absolute;
  margin-left: -100px;
  width: 0px;
  height: 2px;
  background-color: white;
  border-radius: 2px;
}
div#bgBar {
  border-radius: 2px;
}
And just style up the loading progress text a tiny bit too:

p#loadingInfo {
  color: #666;
  letter-spacing: 1px;
  position: absolute;
  width: 100%;
  font-family: "Monaco", sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 8px;
  margin-top: 10px;
}
Once the loading information displays the way you want it to, we just need to connect it up to the loading data in unity progress.js.

Hide everything when loading is complete in SetProgress() and Clear(), and connect up the progress to your CSS and loading message in Update():

function UnityProgress (dom) {
  this.progress = 0.0;
  this.message = "";
  this.dom = dom;
  var parent = dom.parentNode;
  
  this.SetProgress = function (progress) { 
    if (this.progress < progress)
      this.progress = progress; 
    if (progress == 1) {
      this.SetMessage("Preparing...");
      document.getElementById("bgBar").style.display = "none";
      document.getElementById("progressBar").style.display = "none";
    } 
    this.Update();
  }
  this.SetMessage = function (message) { 
    this.message = message; 
    this.Update();
  }
  this.Clear = function() {
    document.getElementById("loadingBox").style.display = "none";
  }
  this.Update = function() {
    var length = 200 * Math.min(this.progress, 1);
    bar = document.getElementById("progressBar")
    bar.style.width = length + "px";
    document.getElementById("loadingInfo").innerHTML = this.message;
  }
  this.Update ();
}