.progress{position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background:rgba(0,0,0,0.4);overflow:hidden;}
.progress .cover{position:absolute;top:10%;left:10%;width:80%;height:80%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;color:rgba(0,0,0,1);font-weight:bold;}
.progress .cover span:nth-of-type(1){display:block;margin-top:13px;color:rgba(0,0,0,0.4)}
.progress .cover span:nth-of-type(2){display:block;font-size:36px;}
.progress .cover span:nth-of-type(3){color:rgba(0,0,0,0.4);display:block;}
.progress .controls{position:absolute;width:100%;height:50%;top:25%;left:0;text-align:center;}
.progress .controls input[type="text"]{width:40px;}
.progress.circle{display:inline-block;margin-bottom:0;width:150px;height:150px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.progress.circle .cover{background:#fff;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.progress.circle.disc .cover{background:none;}
.progress .obscure{position:absolute;width:50%;height:100%;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;opacity:1;}
.progress .obscure div{position:absolute;width:200%;height:200%;background:rgba(76,133,212,1)}
.progress.red .obscure div{background:#ab3b42}
.progress.green .obscure div{background:#3c9983}
.progress.purple .obscure div{background:#5a4473}
.progress .obscure.right{top:0;left:50%;}
.progress .obscure.right div{top:0;right:100%;transform-origin:100% 25%;-ms-transform-origin:100% 25%;-moz-transform-origin:100% 25%;-o-transform-origin:100% 25%;-webkit-transform-origin:100% 25%;}
.progress .obscure.left{top:0;left:0;}
.progress .obscure.left div{top:0;left:100%;transform-origin:0% 25%;-ms-transform-origin:0% 25%;-moz-transform-origin:0% 25%;-o-transform-origin:0% 25%;-webkit-transform-origin:0% 25%;}
.progress.bar{display:block;width:auto;height:auto;margin-bottom:0.5em;}
.progress.bar.hbar .barprogress{height:2em;width:0;background:#CCC;opacity:0.7;}
.progress.bar.hbar .cover{text-align:right;}
.progress.bar.vbar{display:inline-block;width:50px;height:160px;}
.progress.bar.vbar .barprogress{position:absolute;bottom:0;left:0;height:0;width:100%;background:#CCC;opacity:0.7;}