style.css

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  overflow: hidden;
  justify-content: center;
  height: 100vh;
  background: rgb(2,37,31);
  background: linear-gradient(90deg, rgba(2,37,31,1) 0%, rgba(9,121,112,1) 27%, rgba(20,185,169,1) 56%, rgba(0,255,221,1) 100%);
}

.circle-chart {
  width: 150px;
  height: 150px;
}

.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: 4px;
    font-weight: bold;
    color: darkgreen;
}

.success-stroke {
  stroke: #00C851;
}

.warning-stroke {
  stroke: #ffbb33;
}

.danger-stroke {
  stroke: #ff4444;
}

#demo
{
  background-color: white; 
  height: 350px; 
  padding: 30px; 
  margin-top: 5%;
  border-radius: 15px;
  box-shadow: 1px 1px 35px 4px #02251f;
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}