Css 如何更改圆形边框的长度

我正在尝试为我正在开发的网站创建一个级别指示器。我想让它显示某人离下一个级别有多远，也就是说，在一个漂亮的圆圈图形中显示他们的点/xp。到目前为止，这是我所拥有的，但我似乎无法更改加载程序/边框的长度

我到处都找遍了，什么也没找到。有人有什么想法吗

谢谢

.loader 
{
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: putAtStart .001s forwards;
}

@keyframes putAtStart 
{
    100% { transform: rotate(45deg); }
}

---

我认为使用“边界半径解决方案”只更改一个值是不可能的。要使酒吧更长，您需要使用另一个边框来覆盖它，以此类推

您可以做的是将每个季度划分为4个CSS类，并将它们相应地应用到当前级别。 要实现任何级别指示器的值（不仅仅是每25%），您需要将loader div分为4个级别指示器，每个级别指示器负责一个季度。最后一个div需要具有变换的自定义值（例如变换：旋转（15度）；）。但是还需要更多的代码（JS）。最大的问题是要达到前25%，因为旋转不会改变长度

.loader
{
边框：16px实心#F3；/*浅灰色*/
边界半径：50%；
宽度：120px；
高度：120px；
}
.装载机25
{
边框顶部：16px实心#3498db；/*蓝色*/
动画：向前推启动0.001s；
}
.装载机50{
右边框：16px实心#3498db；/*蓝色*/
动画：向前推启动0.001s；
}
.装载机75{
边框底部：16px实心#3498db；/*蓝色*/
动画：向前推启动0.001s；
}
@关键帧putAtStart{
100%{变换：旋转（45度）；}
}

---

测试

我找到了一个好的、易于使用的解决方案。它是一个javascript文件，可以创建一个漂亮且易于自定义的进度条。

---

请添加html代码谢谢您的回复，我将试用此解决方案编辑后，该解决方案有一个小问题：当值为0到25%时，在灰色圆圈后面的左上角可以看到一个蓝色人工制品。也许可以通过将“加载器盖”的背景色设置为白色（目前它无法工作，因为它将覆盖所有白色）。我尝试使用它和我自己的背景色很长一段时间，但没有任何效果。最终，我找到了progressbar.js，这是一个拥有我所需要的一切的项目。非常感谢你的帮助[