Css 进度循环完成

我正在尝试创建一个基于百分比完成圆的等式或方法

以下是我所拥有的：

我希望能够根据百分比增加完成圆圈，并从侧面开始，如下图所示：

我试图使路线相似，但我没有运气与这或计算

这是我的密码：

#进度条{
位置：绝对位置；
左：50%；
最高：55%；
转换：翻译（-51%，-50%）；
宽度：40%；
}
.集装箱{
位置：相对位置；
宽度：100%；
显示器：flex；
证明内容：周围的空间；
}
.集装箱.卡片{
位置：相对位置；
宽度：400px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：400px；
边界半径：4px；
文本对齐：居中；
溢出：隐藏；
过渡：0.5s；
}
.集装箱.卡片：之前{
内容：''；
位置：绝对位置；
排名：0；
左-50%；
宽度：100%；
身高：100%；
背景：rgba（255，255，255，0.03）；
指针事件：无；
z指数：1；
}
{
位置：相对位置；
宽度：300px；
高度：300px；
边界半径：50%；
框阴影：插入0 50px#000；
背景：#222；
z指数：1000；
}
.百分比.数字{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：50%；
}
.百分比.数字h2{
颜色：#777；
字号：700；
字体大小：40px；
过渡：0.5s；
}
.卡：悬停.百分比.数字h2{
颜色：#fff；
字体大小：60px；
}
.百分比.数字h2跨度{
字体大小：24px；
颜色：#777；
过渡：0.5s；
}
.卡片：悬停.百分比.数字h2跨度{
颜色：#fff；
}
.文本{
位置：相对位置；
颜色：#777；
边缘顶端：40px；
字号：700；
字号：18px；
字母间距：1px；
文本转换：大写；
过渡：0.5s；
}
svg{
位置：相对位置；
宽度：123%；
身高：123%；
z指数：1000；
}
svg圆{
宽度：100%；
身高：100%；
填充：无；
笔划#191919；
笔画宽度：10；
笔划线头：圆形；
转换：转换（-28px，-28px）；
}
svg循环：第n个子循环（2）{
行程：440；
行程偏移：计算（440-（440*90）/100）；
行程：#00ff43；
}

60%
完成115项目标中的69项

在第二个圆上的对齐和设置划线长度都存在问题

看起来原始代码使用了第一个圆来填充第二个圆，但由于循环div百分比，它变得多余。 “对齐”处于禁用状态，因为圆在一个直径为123%的svg内的半径为40%，该svg将其与此圆div隔开。 已尝试通过翻译-23px来重新对齐 简化我们只画一个svg圆，它将有绿色边框的百分比，并确保它完全超过div百分比

现在我们来计算显示百分比的绿色条 CSS有一个calc，它看起来像是试图计算90%分数的破折号大小。 但它看起来不像是合法的CSS（对于要执行的每个计算，都需要计算）。 CSS也有一个固定的440，大约代表60%，而不是整个圆圈。 从这两个设置开始，我们需要破折号为圆周长的n%。 所以我们计算圆的周长，然后是它的%并用圆周长度的间隙画出这个长度

注意-由于可以在带有边框或阴影的曲线上获得边缘效果，因此暗圆的背景已更改为半径稍小的径向渐变图像

此代码段还有一个额外的输入元素，您可以在其中输入已达到的目标数，以检查绿色弧的长度是否正确

document.querySelector（'.goals'）.addEventListener（'change'，function（）{
var goals=parseInt（this.value）；
var circle=document.querySelector（'circle'）；
var percentdiv=document.querySelector（'.percent'）；
var completed=document.querySelector（'.completed'）；
completed.innerHTML=目标；
var totaldiv=document.querySelector（'.total'）；
var total=totaldiv.innerHTML；
var pc=目标*100/总计；
var r=circle.getAttribute（'r'）。replace（'%，''）*percentdiv.clientWidth/100；//圆的实际半径
var c=Math.PI*（r*2）；//周长为2*PI*r
如果（isNaN（goals））{pc=100；}
如果（pc<0）{pc=0；}
如果（pc>100）{pc=100；}
document.querySelector（'.number h2'）。innerHTML=Math.floor（pc）+'%；
变量长度=pc*c/100；
circle.style.strokeDasharray=长度+''+（c-长度）；
circle.style.strokeWidth=（长度>0）？“5%”：0；
});
*{
保证金：0；
填充：0；
框大小：边框框；
}
#进度条{
位置：绝对位置；
左：50%；
最高：55%；
转换：翻译（-51%，-50%）；
宽度：40%；
}
.集装箱{
位置：相对位置；
宽度：100%；
显示器：flex；
证明内容：周围的空间；
}
.集装箱.卡片{
位置：相对位置；
宽度：400px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：400px；
边界半径：4px；
文本对齐：居中；
溢出：隐藏；
过渡：0.5s；
}
.集装箱.卡片：之前{
内容：''；
位置：绝对位置；
排名：0；
左-50%；
宽度：100%；
身高：100%；
背景：rgba（255，255，255，0.03）；
指针事件：无；
z指数：1；
}
{
位置：相对位置；
宽度：300px；
高度：300px；
边界半径：50%；
边框颜色：透明；
边框宽度：0；
边框样式：无；
rbox阴影：插入0 50px#000；
背景图像：径向梯度（#4440%，#222 70%，透明70%，透明100%）；
背景：#222；
z指数：10