Javascript 如何为进度条进行三角形设计

我有一个由下面列出的代码生成的进度条。我希望使用三角形进度条，如果我点击按钮，自动增加宽度（蓝色）。我想能够完成一个进度条完整的三角形形状

$（文档）.ready（函数（）{
//var进程=0；
$（'.clickbutton'）。单击（函数（）{
//进步++；
$（'#bar'）.css({
'宽度'：$（this）.width（）*2
});
//$（'#bar'）.html（进度）；
});
});
.container{
宽度：200px；
高度：200px；
位置：相对位置；
边框顶部：4px实心#e74c3c；
顶部：295px；
保证金：0px自动；
}
.三角形1{
位置：绝对位置；
保证金：自动；
顶部：-74px；
左：0；
右：0；
宽度：137px；
高度：137px；
变换：旋转（45度）；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
-ms变换：旋转（45度）；
边框顶部：4px实心#e74c3c；
左边框：4px实心#e74c3c；
}
.progressbar{
高度：15px；
背景：蓝色；
位置：绝对位置；
z指数：999999；
顶部：-11px；
}
.点击按钮{
背景：古色白；
文本对齐：居中；
线高：35px；
光标：指针；
位置：绝对位置；
}

按钮
我创建了一个稍微不同的解决方案，所以您可以看看它是否适合您的项目。。我正在使用vivus免费库，您需要根据自己的需要对其进行微调，并将其连接到一些progress调用函数

segs = 6;  // how much segments to split triangle
duration = 120; // time for all animation

var svg = new Vivus('triangle', { 
    duration: duration, 
    start: 'manual', 
    type: 'oneByOne',
  }
);

$('#button').on('click', function(){
  svg.reset().play();
})

$('#segment').on('click', function(){
  if(segs == 1){
    segs = 6; svg.reset();
  } else{
    svg.setFrameProgress( (1 / segs) );
    segs--;
  }
})

在这里你可以看到一个活生生的例子，希望能对你有所帮助。。干杯，k

这里是一个完全使用CSS的解决方案（除了通过添加类来开始动画）


document.getElementById（“按钮”）.addEventListener（“单击”，函数）（）{
var animation=document.getElementById（“动画”）；
animation.className=animation.className==“打开”？：“打开”；
})
.segment{
宽度：200px；
高度：10px；
背景：红色；
显示：内联块；
边界半径：100px；
溢出：隐藏；
}
.1段{
边缘顶部：160px；
变换：旋转（-45度）；
变换原点：左上角；
位置：相对位置；
z指数：1；
}
.2段{
变换：旋转（45度）；
变换原点：右上角；
左边距：-121px；
}
.3段{
宽度：282px；
显示：块；
左边距：282px；
利润上限：-7px；
变换原点：左上角；
变换：旋转（180度）；
}
.段跨度{
显示：内联块；
背景：蓝色；
宽度：0；
高度：100px；
过渡：宽度0.3s线性；
}
.1段跨度{
过渡延迟：0.6s；
}
.2段跨度{
过渡延迟：0.3s；
}
.3段跨度{
转换延迟：0s；
}
#动画.on.segment1跨度{
转换延迟：0s；
}
#动画.on.segment2span{
过渡延迟：0.3s；
}
#动画.on.segment3 span{
过渡延迟：0.6s；
}
#动画.on.段跨度{
宽度：100%；
}

启动动画
您想单击按钮并将其分阶段进行，还是只需单击一次即可在三角形周围形成完整的蓝色边框？谢谢您的提问，我只需要类似的阶段。在本例中，我有6个阶段，因此我将单击按钮6次以填充三角形。您是否有机会查看我针对您的三角形的codepen解决方案。。？