如何建立自订的圈数计数器

Question

我想使用纯CSS和JavaScript构建一个圆形计数器，如下所示。

一旦圆满边界，就从头开始重复。

我将整个边框图像作为A层的背景，并在其上添加了新的B层。并尝试像这样控制B层的线性梯度，

background-image: linear-gradient(-90deg, transparent 50%, white 50%),
    linear-gradient(-30deg, white 50%, transparent 50%)

但它只适用于半个圆。