<div id="readout">
<svg viewBox="0 0 100 100">
  <circle r="25" cx="50" cy="50" id="pie"/>
</svg>
</div>

svg {
  transform: rotate(-90deg);
  border-radius: 50%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#pie {
  fill: #E3000F;
  stroke: #F9B000;
  stroke-width: 50;
  stroke-dasharray: 158 158; 
  stroke-dashoffset: -58px;
  transition:all 2s;
}
#readout {
  width: 32px;
  margin: 2rem auto; 
  position: relative;
  height: 0;
  padding-top: 25%; 
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.