.canvas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 350px;
}

.unit {
  fill: none;
  stroke-width: 5;
}

.unit.base {
  stroke: #dcdcdc;
  stroke-dasharray: 75 100;
  stroke-dashoffset: -10;
}

.unit.progress {
  stroke: #00008b;
  stroke-dasharray: 20 100;
  stroke-dashoffset: -10;
  animation: render 1.5s forwards;
}

@keyframes render {
  0% {
    stroke-dasharray: 0 100;
  }
}