Simplified the ProgressBar a bit: made the div fixed-size, removed the unnecessary '.remaining' div, used percent size for the '.progress' div.

web/viewer.css

@@ -397,18 +397,22 @@ canvas {
 }
 
 #loadingBar {
+  background-color: #333;
   display: inline-block;
   border: 1px solid black;
   clear: both;
   margin:0px;
   line-height: 0;
   border-radius: 4px;
+  width: 15em;
+  height: 1.5em;
 }
 
 #loadingBar .progress {
   background-color: green;
   display: inline-block;
-  
+  float: left;
+
   background: #b4e391;
   background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));
@@ -419,13 +423,9 @@ canvas {
 
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
-}
 
-#loadingBar .remaining {
+  width: 0%;
-  background-color: #333;
+  height: 100%;
-  display: inline-block;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
 }
 
 #PDFBug {

web/viewer.html

@@ -144,7 +144,7 @@
 
     <div id="loadingBox">
         <div id="loading">Loading... 0%</div>
-        <div id="loadingBar"><div class="progress"></div><div class="remaining"></div></div>
+        <div id="loadingBar"><div class="progress"></div></div>
     </div>
     <div id="viewer"></div>
   </body>

web/viewer.js

@@ -36,29 +36,24 @@ var ProgressBar = (function ProgressBarClosure() {
   function ProgressBar(id, opts) {
 
     // Fetch the sub-elements for later
-    this.progressDiv = document.querySelector(id + ' .progress');
+    this.div = document.querySelector(id + ' .progress');
-    this.remainingDiv = document.querySelector(id + ' .remaining');
 
     // Get options, with sensible defaults
-    this.height = opts.height || 1;
+    this.height = opts.height || 100;
-    this.width = opts.width || 15;
+    this.width = opts.width || 100;
-    this.units = opts.units || 'em';
+    this.units = opts.units || '%';
     this.percent = opts.percent || 0;
 
     // Initialize heights
-    this.progressDiv.style.height = this.height + this.units;
+    this.div.style.height = this.height + this.units;
-    this.remainingDiv.style.height = this.height + this.units;
   }
 
   ProgressBar.prototype = {
-    constructor: ProgressBar,
 
     updateBar: function ProgressBar_updateBar() {
       var progressSize = this.width * this._percent / 100;
-      var remainingSize = (this.width - progressSize);
 
-      this.progressDiv.style.width = progressSize + this.units;
+      this.div.style.width = progressSize + this.units;
-      this.remainingDiv.style.width = remainingSize + this.units;
     },
 
     get percent() {
@@ -307,10 +302,8 @@ var PDFView = {
   open: function pdfViewOpen(url, scale) {
     document.title = this.url = url;
 
-    // FIXME: Probably needs a better place to get initialized
     if (!PDFView.loadingBar) {
-      PDFView.loadingBar = new ProgressBar('#loadingBar', {
+      PDFView.loadingBar = new ProgressBar('#loadingBar', {});
-        width: 15, height: 1.5, units: 'em'});
     }
 
     var self = this;