html - 带圆点的圆形进度条

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>

现在，在进度条（笔划）的末尾，我想有一个小点（圆圈），如所附屏幕截图所示：

如何将这个小圆圈点添加到进度条并让它跟随进度？

标签： htmlcsssvg