.circle-chart{width:60px;height:60px}.circle-chart__circle{stroke:#00acc1;stroke-width:2;stroke-linecap:square;fill:none;animation:circle-chart-fill 2s reverse;transform:rotate(-90deg);transform-origin:center}.circle-chart__circle--negative{transform:rotate(-90deg) scale(1,-1)}.circle-chart__background{stroke:#efefef;stroke-width:2;fill:none}.circle-chart__info{animation:circle-chart-appear 2s forwards;opacity:0;transform:translateY(0.3em)}.circle-chart__percent{alignment-baseline:central;text-anchor:middle;font-size:8px}.circle-chart__subline{alignment-baseline:central;text-anchor:middle;font-size:3px}.success-stroke{stroke:#00c851}.warning-stroke{stroke:#fb3}.danger-stroke{stroke:#f44}@keyframes circle-chart-fill{to{stroke-dasharray:0 100}}@keyframes circle-chart-appear{to{opacity:1;transform:translateY(0)}}#progressBox{display: none;width:140px;height:140px;text-align:center;position:fixed;top:calc(50% - 70px);left:calc(50% - 70px);padding-top:25px;background-color:rgba(0,0,0,0.6);border-radius:5px;box-sizing:border-box;z-index: 1000}#progressBox p{color: #fff;font-size: 13px;margin: 0;position: absolute;width: 100%;bottom: 25px;}#circleRatio{position:absolute;top:50%;margin-top:-22px;margin-left:-21px;left:50%;width:44px;height:22px;text-align:center;line-height:22px;color:#fff}