Merge pull request #505 from swznd/master

Add loading status indicator

web/viewer.css

@@ -271,3 +271,8 @@ canvas {
     page-break-after: always;
   }
 }
+
+#loading {
+	margin: 100px 0;
+	text-align: center;
+}

web/viewer.html

@@ -89,7 +89,8 @@
         </div>
      </div>
     </div>
-
+    
+    <div id="loading">Loading... 0%</div>
     <div id="viewer"></div>
   </body>
 </html>

web/viewer.js

@@ -110,13 +110,15 @@ var PDFView = {
     var xhr = new XMLHttpRequest();
     xhr.open('GET', url);
     xhr.mozResponseType = xhr.responseType = 'arraybuffer';
-    xhr.expected = (document.URL.indexOf('file:') === 0) ? 0 : 200;
+    xhr.expected = (document.URL.indexOf('file:') === 0) ? 0 : 200; 
+    xhr.onprogress = PDFView.progressLevel;
 
     xhr.onreadystatechange = function() {
       if (xhr.readyState === 4 && xhr.status === xhr.expected) {
         var data = (xhr.mozResponseArrayBuffer || xhr.mozResponse ||
                     xhr.responseArrayBuffer || xhr.response);
-
+        
+        document.getElementById('loading').style.display = "none";
         PDFView.load(data, scale);
       }
     };
@@ -124,6 +126,11 @@ var PDFView = {
     xhr.send(null);
   },
 
+  progressLevel: function(evt) {
+    var p = Math.round((evt.loaded / evt.total) * 100);
+    document.getElementById('loading').innerHTML = 'Loading... ' + p + '%';
+  },
+
   navigateTo: function(dest) {
     if (typeof dest === 'string')
       dest = this.destinations[dest];