我有一个定制的圆形进度条,如下所示:
.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>
现在,在进度条(描边)的末尾,我希望有一个小点(圆圈),如所附的屏幕快照所示:
如何在进度条上添加这个小圆圈并使其跟随进度?