.circle-chart { width: 180px; height: 180px; } .circlechart { text-align: center; } .circle-chart__circle { stroke: #00acc1; stroke-width: 2; stroke-linecap: square; fill: none; animation: circle-chart-fill 5s reverse; transform: rotate(-90deg); transform-origin: center; } .circle-chart__circle--negative { transform: rotate(-90deg) scale(1,-1); } .circle-chart__background { stroke: #fff; 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: hanging; text-anchor: middle; font-size: 8px; } .circle-chart__subline { alignment-baseline: central; text-anchor: middle; font-size: 3px; } .success-stroke { stroke: #0D5ADC; } .warning-stroke { stroke: #0E58DB; } .success-stroke { stroke: #FFB40D; } @keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } } @keyframes circle-chart-appear { to { opacity: 1; transform: translateY(0); } }