.circlechart {
margin-right: 20px;
}
.circle-chart {
width: 100px;
height: 100px;
}
.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;
font-weight: 600;
margin-bottom: 3px;
}
.circle-chart__subline {
alignment-baseline: central;
text-anchor: middle;
font-size: 5px;
}
.success-stroke {
stroke: #177265;
}
.warning-stroke {
stroke: #ffbb33;
}
.danger-stroke {
stroke: #ff4444;
}
@keyframes circle-chart-fill {
to { stroke-dasharray: 0 100; }
}
@keyframes circle-chart-appear {
to {
opacity: 1;
transform: translateY(0);
}
}