我正在尝试使用引导进度条，以便它可以围绕边缘环绕我的图像。
就像在html下面的代码中一样，我仍然希望像引导程序一样在div中设置宽度。
问题：我如何使用bootstrap进度条进行包装 在我的图片周围哪里仍然可以用div设置进度条？
这是我到目前为止所尝试过的。 代码段Example Codepen
CSS
.progress {
border-radius: 50%;
}
.progress-bar {
border-radius: 50%;
}
.wrapper > img {
position: absolute;
top: 0;
left: 0;
text-align: center;
}
HTML
<div class="container">
<div class="row">
<div class="page-header">Circle progress bar with image</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="wrapper">
<img src="holder.js/150x150" class="img-circle img-thumbnail" />
<div class="progress" style="height: 150px; width: 150px;">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：15)
您可以使用＆＃34;自动化＆＃34; SVG圈子是自动生成的，因为您不需要对宽度，高度，半径或视图框尺寸等值进行硬编码，只需要相应的img标记width和height属性，也是svg stroke-width的{{1}}属性。
所有进一步的计算取决于这些属性的值，例如定位图像和圆，设置svg的宽度和高度，以及圆的半径和圆周的值。此外，如果您的页面中有多个圆圈，则圆圈不需要具有相同的宽度和大小，每个圆圈将采用相应circle的尺寸。
所有魔法都在这一行：
img其中'stroke-dasharray': SVG.circum * ratio / 100 + ' ' + SVG.circum
是圆周的长度，其背后的概念是控制 circum （1） 的值脚本。例如，假设您调用提供 stroke-dasharray 值的函数，并且让我们说70 circum ，所以它将是：
500将其视为第二个价值＆＃34; stroke-dasharray: 350 500
＆＃34;是整圆，第一个值＆＃34; 500＆＃34;是中风停止的地方。
要设置某个圆的值，只需调用350函数，传递圆元素和所需的值，如下所示：
miProgressbar()
更新：以下所有示例均使用Chrome，Firefox，IE9-IE11和Vivaldi浏览器进行了测试，并且在IE9 +中的所有甚至中均有效，但在IE9-IE11示例中除外和example6只有第一个圆圈有笔画，不确定现代版本的Safari，Opera和Edge 。
示例1：CodePen - 完整的圈子 [ miProgressbar($('#circle1'), 70);
]
ratio = 100%
<强> HTML：
包装div的结构如下所示，请记住 ALL 自动计算基于每个的var svgCircles = $('.wrapper svg circle');
miProgressbar($('#circle1'), 70);
// from here on, everything works automatically, you don't need to change anything
svgCircles.each(function() {
var $this = $(this),
$parent = $this.parent(),
SVG = miSVGdata($this);
$this.attr('r', SVG.radius);
$parent.css({
'top': SVG.strokeWidth / 2,
'left': SVG.strokeWidth / 2
});
$parent.attr('viewBox', '0 0 ' + SVG.svgWidth + ' ' + SVG.svgHeight);
$parent.attr('width', SVG.svgWidth);
$parent.attr('height', SVG.svgHeight);
});
function miProgressbar(element, ratio) {
var SVG = miSVGdata(element);
element.css({
'stroke-dasharray': SVG.circum * ratio / 100 + ' ' + SVG.circum
});
}
function miSVGdata(element) {
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) + strokeWidth,
circum, radius, svgObj;
img.css({
top: strokeWidth,
left: strokeWidth
});
radius = svgWidth / 2 - strokeWidth / 2;
circum = parseInt(2 * radius * 3.14, 10);
svgObj = {
svgWidth: svgWidth,
svgHeight: svgHeight,
parent: svgParent,
strokeWidth: strokeWidth,
radius: radius,
circum: circum
};
return svgObj;
}
和width属性>图像，因此必须为这些图像提供。
height请记住，您甚至可以使用<div class="wrapper">
<img src="holder.js/150x150" width="150" height="150" class="img-circle img-thumbnail" />
<svg class="mi-progressbar">
<circle id="circle1" r="25%" cx="50%" cy="50%" stroke-width="20"></circle>
</svg>
</div>
通过javascript注入SVG代码，这样您的硬编码包装器就会只有.insertAfter()。
示例2：CodePen - 着色
示例包含多个图像和不同样式，颜色与引导进度条和相同的命名样式相同，如下所示：
img示例3：CodePen 在调用此函数时设置了不同的值：
svg circle.progress-bar-success{ stroke:#5cb85c; }
示例4：CodePen - 动画
您可以通过将不同的-i.e增加比率值传递给miProgressbar($('#circle1'), 0);
miProgressbar($('#circle2'), 100);
miProgressbar($('#circle3'), 65);
miProgressbar($('#circle4'), 40);
miProgressbar($('#circle5'), 15);
函数来为循环进度条设置动画。上述动画的代码片段：
miProgressbar(element, ratio) 示例5：CodePen - 不同的图片尺寸svg圈子只需更改var i = 0;
setInterval(function() {
if(i <= 100){
miProgressbar(svgCircles, i);
i++;
}
}, 50);
和width属性的值即可自动调整height 。
*没有按照IE9中的假设工作 - IE11，只有第一个圆圈
示例6：CodePen - 值img控制边框宽度
*没有按照IE9中的假设工作 - IE11，只有第一个圆圈
（1） - 来源：