.circle-chart{height:150px;width:150px}.circle-chart__circle{stroke-linecap:square;animation:circle-chart-fill 2s reverse;transform:rotate(-90deg);fill:none;transform-origin:center;stroke-width:2;stroke:#00acc1}.circle-chart__circle--negative{transform:rotate(-90deg) scaleY(-1)}.circle-chart__background{fill:none;stroke-width:2;stroke:#efefef}.circle-chart__info{animation:circle-chart-appear 2s forwards;transform:translateY(.3em);opacity:0}.circle-chart__percent{text-anchor:middle;font-size:8px;alignment-baseline:central}.circle-chart__subline{text-anchor:middle;font-size:3px;alignment-baseline:central}.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{transform:translateY(0);opacity:1}}