Is Unity WebGL loading? A simple loader

F = (When you publish your Unity application or prototype in WebGL a problem that your testers or players may have is that while the browser is loading the application, no progress bar appears and so they may be tempted to reload the page again and so… F() ).

A simple fix to reassure them is to paste this script at the bottom of the index.html file that Unity produces at build:

<script>
  /**
   * Created by
   * Matteo Bicocchi @pupunzi
   * Pietro Polsinelli @ppolsinelli
   * Follow us as we are creating a game on #football 
   * with a story: "Football Voodoom" :-)
   * */

  var appName = "<b>" + Module.codeUrl.replace("Release/", "").replace(".js","") + "</b> ";
  var canvas = document.getElementsByTagName("canvas")[0];
  var canvasRect = canvas.getBoundingClientRect();

  var loader = document.createElement("div");
  loader.id = "loader";

  var loaderWidth = canvas.offsetWidth;
  var loaderHeight = canvas.offsetHeight;

  document.body.appendChild(loader);

  loader.style.position = "absolute";

  loader.style.top = 0;
  loader.style.bottom = 0;
  loader.style.left = 0;
  loader.style.right = 0;
  loader.style.margin = "auto";
  loader.style.width = loaderWidth + "px";
  loader.style.height = loaderHeight + "px";
  loader.style.background = "transparent";
  loader.style.color = "#fff";
  loader.style.opacity = 0.8;
  loader.style.fontSize = "16px";
  loader.style.letterSpacing = "3px";
  loader.style.fontWeight = "100";
  loader.style.textAlign = "left";
  loader.style.padding =  "30px";
  loader.style.boxSizing = "border-box";

  var dotCount = 0;
  var checkDisplay = setInterval(function(){

    if(Module.progress.progress > 0) {
      loader.style.display="none";
      clearInterval(checkDisplay);
    } else {

      loader.innerHTML = "Loading " + appName;

      for (var x = 0; x<dotCount; x++){
        loader.innerHTML+= ".";
      }
      
      dotCount = dotCount >= 40 ? 0 : ++dotCount;
    }
  },100)
</script>

This will show immediately “Loading…” and will animate it until the app loader appears. See it here:

Cool no? The JavaScript is really basic and should work wherever WebGL does.