loading progress bar

Create a loading progress bar, so the visitor can monitor file download speed.

<html>

  <body>
        <div id="map" style="position:relative;left:100px;width:400px;height:400px;"><div>
        <div id="progressDiv"
            style="background-color:red;position:relative;left:0px;width:0px;height:2px;"><div>
  </body>

  <script type="text/javascript" src="http://www.spacial.io/cad4web/lib/cad4web.js"><script>

  <script>
    var cad = new cad4web.ContextClass( 'map', { backgroundColor: [20, 20, 20, 1] });
    var file = 'http://www.spacial.io/cad4web/files/nomoi_okxe_line.shp;
    cad.clear();

    function progressCallback(n) {
         document.getElementById('progressDiv').style.width = n / 3603764 * 100 + '%';
    }

    cad.addShp(file, [190, 100, 250 ], { progressCallback: progressCallback } )
        .then (function () {
             cad.extent();
        }) ;
  </script>

</html>

// map div must have explicitly position defined
   (absolute, relative, etc).

// define div to display progress


// File on server must have header
    Access-Control-Allow-Origin: *

// clear library intro image

// create function to adjust progress div width
     file size must be known

// pass function as parameter