Круговая шкала прогресса с точкой круга

Question

У меня есть специальный круглый индикатор выполнения, например:

.storage_counter_holder svg {
  fill: none;
  stroke-width: 4;
  stroke-dasharray: 534;
  stroke-linecap: round;
  width: 100%;
  height: 100%;
}

.storage_counter_holder svg circle {
  transform: rotate(154deg);
  transform-origin: center;
}

.storage_counter_holder svg circle:nth-child(1) {
  stroke-dashoffset: 200;
  stroke: lightgray;
}

.storage_counter_holder svg circle:nth-child(2) {
  stroke-dashoffset: 340;
  /*calc(440 - (440 * 87) / 100);*/
  stroke: #15385f;
}

.storage_counter_holder svg text {
  fill: #3D3D3D;
  text-anchor: middle;
}

.storage_counter_holder svg text:nth-child(3) {
  font-size: 24px;
  font-family: "Regular Fira Sans";
}

.storage_counter_holder svg text:nth-child(4) {
  font-size: 16px;
  font-family: "Light Fira Sans";
}

<div name="storage_counter_holder" class="storage_counter_holder">
  <svg>
             <circle cx="50%" cy="50%" r="48.5%"></circle>
             <circle cx="50%" cy="50%" r="48.5%"></circle>
             <text x="50%" y="40%" dominant-baseline="middle">5,2/10 TB</text>
             <text x="50%" y="55%" dominant-baseline="middle">available storage</text>
        </svg>
</div>

Теперь, в конце индикатора выполнения (штрих), я хотел бы иметь маленькую точку (кружок), как на прикрепленном скриншоте: введите описание изображения здесь

Как добавить этот маленький кружок на индикатор выполнения, чтобы он следил за прогрессом?