add loading status

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];