progress bar matches new UI

This commit is contained in:
Artur Adib 2012-04-25 17:32:26 -04:00
parent a423827e0f
commit f06ca00e1c
2 changed files with 21 additions and 11 deletions

View File

@ -572,6 +572,8 @@ canvas {
#loadingBox {
margin: 100px 0;
text-align: center;
color: #ddd;
font-size: 14px;
}
#loadingBar {
@ -579,25 +581,25 @@ canvas {
display: inline-block;
border: 1px solid black;
clear: both;
margin:0px;
margin: 0px;
margin-top: 5px;
line-height: 0;
border-radius: 4px;
width: 15em;
height: 1.5em;
width: 200px;
height: 25px;
}
#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));
background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
background: #666;
background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%);
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, #999 0%,#666 50%,#999 100%);
background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%);
background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 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;

View File

@ -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;
},