src/scss/ddgc/_progress.scss
.progress .bar { 
	background-color: #f2f2f2;
	border: 1px solid #ccc;
	height: 23px;
	padding: 2px;			
	margin: 0 auto;			
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 1px 5px #fff inset, 0 1px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 1px 5px #fff inset, 0 1px 0 rgba(0,0,0,0.1);
	box-shadow: 0 1px 5px #fff inset, 0 1px 0 rgba(0,0,0,0.1);	    	
}
	
.progress .numeral { 
	text-align: right; 
	font-size: 18px;
	color: #707477;
}

.progress .percentage { 
	background: #83868b;
	display: inline-block;
	height: 100%;	
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .3) inset;
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .3) inset;
	box-shadow: 0 0 1px rgba(0, 0, 0, .3) inset;
	-webkit-transition: width .4s ease-in-out;
	-moz-transition: width .4s ease-in-out;
	-ms-transition: width .4s ease-in-out;
	-o-transition: width .4s ease-in-out;
	transition: width .4s ease-in-out;    
	-webkit-animation: progress-bar 2s;
    -moz-animation: progress-bar 2s;
}

.progress.low .percentage {
	background: #ff3019;
	background: -moz-linear-gradient(top,  #ff3019 0%, #cf0404 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
	background: -webkit-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
	background: -o-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
	background: -ms-linear-gradient(top,  #ff3019 0%,#cf0404 100%);
	background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%);
}
.progress.med .percentage {
	background: #ffd65e;	
	background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04));
	background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%);
	background: -o-linear-gradient(top,  #ffd65e 0%,#febf04 100%);
	background: -ms-linear-gradient(top,  #ffd65e 0%,#febf04 100%);
	background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%);	
}
.progress.high .percentage {
	background: #499bea;
	background: -moz-linear-gradient(top,  #499bea 0%, #207ce5 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5));
	background: -webkit-linear-gradient(top,  #499bea 0%,#207ce5 100%);
	background: -o-linear-gradient(top,  #499bea 0%,#207ce5 100%);
	background: -ms-linear-gradient(top,  #499bea 0%,#207ce5 100%);
	background: linear-gradient(to bottom,  #499bea 0%,#207ce5 100%);
}

.progress.done .numeral { color: #68ad16; }
.progress.done .percentage {
	background: #8fc400;
	background: -moz-linear-gradient(top,  #8fc400 0%, #7fad00 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fc400), color-stop(100%,#7fad00));
	background: -webkit-linear-gradient(top,  #8fc400 0%,#7fad00 100%);
	background: -o-linear-gradient(top,  #8fc400 0%,#7fad00 100%);
	background: -ms-linear-gradient(top,  #8fc400 0%,#7fad00 100%);
	background: linear-gradient(to bottom,  #8fc400 0%,#7fad00 100%);				
}

@-webkit-keyframes progress-bar {
   0% { width: 0; }
}
@-moz-keyframes progress-bar {
   0% { width: 0; }
}