| .progress-circular{position:relative;font-size:30px;font-weight:300;width:100px;height:100px;border-radius:50%;background-color:rgba(0,0,0,.2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.progress-circular>span{text-align:center;width:100%;white-space:nowrap;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none;z-index:5}.progress-circular::before{content:'';position:absolute;width:100px;height:100px;clip:rect(0,1em,1em,.5em)}.progress-circular::after{position:absolute;content:" ";border-radius:50%;background-color:#f5f5f5;width:94px;height:94px;text-align:center;white-space:nowrap;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none}.progress-circular.background-blue::after{background-color:#2196f3!important}.progress-circular.background-blue>span{color:rgba(255,255,255,.9)}.progress-circular>span::before{content:'';position:absolute;left:0;top:0;border:2px solid #fff;width:100px;height:100px;clip:rect(0,150px,150px,0);border-radius:50%;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);text-align:center;white-space:nowrap;-webkit-box-flex:0;-webkit-flex:none;-ms-flex:none;flex:none} |