Javascript 圈出从中心向两个方向前进的进度条

如何创建从起点开始沿顺时针+非顺时针方向展开的圆形进度条

以下是我目前的进展：

HTML:

0%

CSS:

.circle-menu\uu circle{
列表样式：无；
填充：0；
保证金：0自动；
位置：相对位置；
宽度：400px；
高度：400px；
}
.circle-menu\uu circle\uu项目{
宽度：0；
身高：100%；
位置：绝对位置；
利润率：0.50%；
光标：自动；
}
.circle-menu\uuu circle\uuu项目\uuu内部{
位置：绝对位置；
左：50%；
底部：98%；
左边距：-5px；
宽度：15px；
高度：15px；
边界半径：50%；
背景色：#333；
}
.circle-menu__circle__svg{
身高：100%；
溢出：可见；
}
.circle-menu__circle__svg__circle_1{
填充：透明；
冲程：#333；
笔划宽度：0.5px；
}
.circle-menu__circle__svg__circle_2{
填充：透明；
冲程：#333；
笔画宽度：4px；
}
.circle-menu__circle__svg__线{
填充：透明；
笔画：黑色；
笔划宽度：0.5px；
行程：315；
行程偏移：315；
-webkit转换：笔划偏移1s；
过渡：行程偏移1s；
}

Javascript:

（函数（）{
//数学技巧2*pi*57=358，必须小于360度
var circle=document.getElementById（'svg-circle-2'）；
var myTimer=document.getElementById（'myTimer'）；
var区间=30；
var角=0；
var角_增量=6；
window.timer=window.setInterval（函数（）{
circle.setAttribute（“笔划dashoffset”，45）；
circle.setAttribute（“笔划数组”，角度+”，20000”）；
myTimer.innerHTML=角度；
如果（角度>=90）{
窗口清除间隔（窗口计时器）；
}
角度+=角度增量；
}.绑定（此），间隔）；
})()

我曾尝试使用

svg

绘制圆，并使用

stroke-dasharray

和

stroke-dashoffset

绘制圆，但我无法设置起点，它只能在一个方向上展开，单击点时，我需要进度条在两个方向上展开

示例-步骤1

示例-步骤2

示例-步骤3

示例-步骤4

这可能会有所帮助

（函数（）{
//数学技巧2*pi*57=358，必须小于360度
var circle=document.getElementById（'svg-circle-2'）；
var myTimer=document.getElementById（'myTimer'）；
var区间=30；
var角=0；
var角_增量=6；
变量pointLocation=-30；/-30,90210
var-arc=120；
window.timer=window.setInterval（函数（）{
setAttribute（“笔划数组”，“角度+”，20000”）；
setAttribute（“变换”、“旋转”（+（点位置-角度/1.8）+“50”）；
myTimer.innerHTML=角度；
如果（角度>=弧）{
窗口清除间隔（窗口计时器）；
}
角度+=角度增量；
}.绑定（此），间隔）；
})（）

.circle-menu\uu circle{
列表样式：无；
填充：0；
保证金：0自动；
位置：相对位置；
宽度：400px；
高度：400px；
}
.circle-menu\uu circle\uu项目{
宽度：0；
身高：100%；
位置：绝对位置；
利润率：0.50%；
光标：自动；
}
.circle-menu\uuu circle\uuu项目\uuu内部{
位置：绝对位置；
左：50%；
底部：98%；
左边距：-5px；
宽度：15px；
高度：15px；
边界半径：50%；
背景色：#333；
}
.circle-menu__circle__svg{
身高：100%；
溢出：可见；
}
.circle-menu__circle__svg__circle_1{
填充：透明；
冲程：#333；
笔划宽度：0.5px；
}
.circle-menu__circle__svg__circle_2{
填充：透明；
冲程：#333；
笔画宽度：4px；
}
.circle-menu__circle__svg__线{
填充：透明；
笔画：黑色；
笔划宽度：0.5px；
行程：315；
行程偏移：315；
-webkit转换：笔划偏移1s；
过渡：行程偏移1s；
}

0%

您可以使用纯CSS实现想要的效果

.circle-menu\uu circle{
显示：块；
保证金：0自动；
宽度：400px；
高度：400px；
}
.circle-menu__circle__svg__circle_1{
填充：透明；
行程：#999；
笔划宽度：0.5px；
}
.circle-menu\uu circle\uu项目{
填充：透明；
冲程：#333；
笔画宽度：4px；
笔划线头：圆形；
行程阵列：0px 314.2px；
行程偏移：157.5px；
过渡：所有1；
指针事件：visibleStroke；
}
.位置--右上角{
变换：旋转（150度）；
}
.位置-底部{
变换：旋转（-90度）；
}
.位置--左上角{
变换：旋转（30度）；
}
.circle-menu\uu circle\uu项：悬停{
行程阵列：100px214.2px；
行程偏移：207.5px；
}