<svg class="graph-bar" width="50%" height="50%" viewBox="0 0 42 42">
  <circle cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#ececec" stroke-width="2"></circle>

  <!-- [D] 게이지
       x: 남은 진행률
       stroke-dasharray="100-x x" -->
  <circle class="gauge" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#24C875" stroke-width="2" stroke-linecap="round" stroke-dashoffset="25" style="stroke-dasharray: 90 10"></circle>
</svg>

<style>
.loader__spinner {
  -webkit-animation: loader-rotate 1.4s linear infinite;
  animation: loader-rotate 1.4s linear infinite;
}

.loader__spinner {
  -webkit-animation-duration: 1.2s;
  animation-duration: 1.2s;
}

.loader__bg {
  stroke: #d8dbe5;
  opacity: .2;
}

.loader__bg {
  stroke: #97999e;
  opacity: .12;
}

.loader__path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  -webkit-transform-origin: center;
  transform-origin: center;
  stroke: #e3e5ec;
  -webkit-animation: loader-dash 1.4s ease-in-out infinite;
  animation: loader-dash 1.4s ease-in-out infinite;
}

.loader__path {
  stroke-dasharray: 87;
  stroke: #a6a9af;
  -webkit-animation: loader-dash-s 1.2s ease-in-out infinite;
  animation: loader-dash-s 1.2s ease-in-out infinite;
}

@keyframes loader-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 56;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
</style>

<svg class="loader__spinner" width="52px" height="52px" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
  <circle class="loader__bg" fill="none" stroke-width="6" cx="29" cy="29" r="26"></circle>
  <circle class="loader__path" fill="none" stroke-width="6" stroke-linecap="round" cx="29" cy="29" r="26"></circle>
</svg>