progress bar matches new UI

web/viewer.css

@@ -572,6 +572,8 @@ canvas {
 #loadingBox {
   margin: 100px 0;
   text-align: center;
+  color: #ddd;
+  font-size: 14px;
 }
 
 #loadingBar {
@@ -580,24 +582,24 @@ canvas {
   border: 1px solid black;
   clear: both;
   margin: 0px;
+  margin-top: 5px;
   line-height: 0;
   border-radius: 4px;
-  width: 15em;
+  width: 200px;
-  height: 1.5em;
+  height: 25px;
 }
 
 #loadingBar .progress {
-  background-color: green;
   display: inline-block;
   float: left;
 
-  background: #b4e391;
+  background: #666;
-  background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%);
+  background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999));
-  background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
+  background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%);
-  background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
+  background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%);
-  background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
+  background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%);
-  background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);    
+  background: linear-gradient(top, #999 0%,#666 50%,#999 100%);    
 
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -606,6 +608,11 @@ canvas {
   height: 100%;
 }
 
+#loadingBar .progress.full {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
 .textLayer {
   position: absolute;
   left: 0;

web/viewer.js

@@ -62,6 +62,9 @@ var ProgressBar = (function ProgressBarClosure() {
     updateBar: function ProgressBar_updateBar() {
       var progressSize = this.width * this._percent / 100;
 
+      if (this._percent > 95)
+        this.div.classList.add('full');
+
       this.div.style.width = progressSize + this.units;
     },