Html 将引导进度条转换为圆圈并在其中显示图像

我试图能够使用引导进度条，这样它就可以环绕我的图像，在边缘形成一个圆圈

就像下面关于html的代码一样，我仍然希望像引导程序那样设置div的宽度

问题：如何使用引导进度条进行包装 在我的图像周围，在div中哪里仍然可以设置进度条

这里是我迄今为止所尝试的。 片段代码笔

CSS

HTML

用图像圈出进度条

您可以使用“自动”SVG圆圈来实现这一点，因为您不需要硬编码宽度、高度、半径或viewBox尺寸等值，而相应的

img

标记只需具有

width

和

height

属性，还有svg

圆的
笔划宽度
属性

所有进一步的计算都取决于这些属性的值，例如定位图像和圆，设置svg的宽度和高度，以及圆的半径和周长的值。此外，如果页面中有多个圆圈，圆圈不需要具有相同的宽度和大小，每个圆圈将从相应的
img
中获取尺寸

所有的魔力都在这一行：

'stroke-dasharray': SVG.circum * ratio / 100 + ' ' + SVG.circum

其中，
圆周
是圆周的长度，其背后的概念是使用脚本控制
笔划数组的值。例如，假设您调用提供值的函数
70，假设
环
是
500，那么它将是：

stroke-dasharray: 350 500

想象一下，第二个值“
500
”是整圈，第一个值“
350
”是笔划停止的位置

要设置某个圆的值，只需调用
miProgressbar（）
函数，传递圆元素和所需的值，如下所示：

miProgressbar($('#circle1'), 70);

svg circle.progress-bar-success{ stroke:#5cb85c; }



更新：下面的所有示例都使用Chrome、Firefox、IE9-IE11和Vivaldi浏览器进行了测试，甚至在IE9+中都能正常工作，但在IE9-IE11示例5和示例6中，只有第一个圆圈有笔划，不确定Safari、Opera和Edge的现代版本



示例1:-整圈[
比率=100%
]

var svgCircles=$（'.wrapper svg circle'）；
miProgressbar（$（'圆圈1'），70）；
//从现在起，一切都会自动进行，您无需更改任何内容
svgCircles.each（函数（）{
变量$this=$（this），
$parent=$this.parent（），
SVG=miSVGdata（$this）；
$this.attr（'r'，SVG.radius）；
$parent.css({
“顶部”：SVG.strokeWidth/2，
“左”：SVG.strokeWidth/2
});
$parent.attr（'viewBox'，'0'+SVG.svgWidth+''+SVG.svgHeight）；
$parent.attr（'width'，SVG.svgWidth）；
$parent.attr（'height'，SVG.svgHeight）；
});
函数miProgressbar（元素、比率）{
var SVG=miSVGdata（元素）；
element.css({
“stroke dasharray”：SVG.circu*比率/100+“”+SVG.circu
});
}
函数miSVGdata（元素）{
var svgParent=element.parent（），
strokeWidth=parseInt（element.attr（'stroke-width'），10），
img=element.parents（'.wrapper'）。find（'img'），
svgWidth=parseInt（img.attr（'width'），10）+strokeWidth，
svgHeight=parseInt（img.attr（'height'），10）+冲程宽度，
周长，半径，svgObj；
img.css({
顶部：冲程宽度，
左：笔划宽度
});
半径=svgWidth/2-冲程宽度/2；
周长=parseInt（2*半径*3.14,10）；
svgObj={
svgWidth:svgWidth，
svgHeight:svgHeight，
家长：svgParent，
strokeWidth：strokeWidth，
半径：半径，
环：环
};
返回svgObj；
}



HTML:

包装器div的结构如下所示，请记住，所有自动计算都基于每个图像的
宽度
和
高度
属性，因此必须为这些图像提供这些属性



请记住，您甚至可以使用
.insertAfter（）
通过javascript注入SVG代码，这样您的硬编码包装器将只包含
img


示例2:-着色

示例中有多个图像和不同样式，颜色与引导进度条相同，命名样式相同，如下所示：

miProgressbar($('#circle1'), 70);

svg circle.progress-bar-success{ stroke:#5cb85c; }


示例3:调用函数时设置了不同的值，如下所示：

miProgressbar($('#circle1'), 70);

svg circle.progress-bar-success{ stroke:#5cb85c; }


示例4:-设置动画

通过向
miProgressbar（元素，比率）
函数传递不同的比率值（即增加比率），可以设置循环进度条的动画。上述动画的代码段：

var i = 0;
setInterval(function() {
    if(i <= 100){
        miProgressbar(svgCircles, i);
        i++;
    }
}, 50);

var i=0；
setInterval（函数（）{
如果（我不是bootstrap，但看看@wolfgang1983抱歉，粘贴的链接不好，我想我可以给你一些关于如何做的想法…@AlFonce我想我会用Mi创意的想法。我想尝试解决这个问题，但我无法超越它。回答得很好！谢谢，我很确定你的尝试会变成这样，如果不是更好的话：）谢谢你这么做，你很可能会得到赏金，让它在接下来的几天里继续运行，给人们一个机会。你欢迎，并确保这是非常公平的，保持赏金的事情，因为你喜欢，就个人而言，这与赏金无关，而不是我把这个问题作为一个小挑战，我喜欢它，谢谢你，祝你玩得愉快