将bootstraps进度条转换为圆形和图像内部

Question

我试图能够使用引导进度条,以便它可以环绕我的图像围绕边缘的圆圈.

就像在html下面的代码中一样,我仍然宁愿像引导程序一样在div中设置宽度.

问题:如何使用bootstrap进度条包裹在我的图像中仍然可以在div中设置进度条？

这是我到目前为止所尝试的.Snippet 示例 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>  

Answer 1

您可以使用"自动"SVG循环来实现此目的,这是自动化的,因为您不需要对宽度,高度,半径或视图框尺寸等硬编码值进行硬编码,只需要相应的img标记具有width和height属性,也是stroke-widthsvg的属性circle.

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

所有魔法都在这一行:

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

circum圆周的长度在哪里,这背后的概念是用我们的脚本控制stroke-dasharray⁽¹⁾的值.例如,假设你调用提供值的函数70,让我们说circum是500,所以它将是:

stroke-dasharray: 350 500

想到它就像第二个值" 500"是整圆,第一个值" 350"是笔画停止的地方.

要设置某个圆的值,只需调用该miProgressbar()函数,传递圆元素和所需的值,如下所示:

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

更新:以下所有示例都经过Chrome,Firefox,IE9-IE11和Vivaldi浏览器测试,甚至在IE9 + 中都有用,除了在IE9-IE11 example5和example6中,只有第一个圆圈有笔画,不确定现代版本的Safari,歌剧和边缘.

示例1:CodePen - 完整圆圈 [ ratio = 100%]

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;
}

HTML:

包装div的结构是这样的,请记住,所有的自动计算是基于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(),这样您的硬编码包装将是img唯一的.

示例2:CodePen - 着色

具有多个图像和不同样式的示例,其颜色与引导进度条和相同的命名样式相同,如下所示:

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

示例3: 在调用函数时设置了不同值的CodePen,如下所示:

miProgressbar($('#circle1'), 0);
miProgressbar($('#circle2'), 100);
miProgressbar($('#circle3'), 65);
miProgressbar($('#circle4'), 40);
miProgressbar($('#circle5'), 15);

示例4:CodePen - 动画

您可以通过将不同的-ie increase - ratio值传递给miProgressbar(element, ratio)函数来为循环进度条设置动画.以上动画的代码片段:

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

示例5:CodePen - 不同的图像大小svg圈将通过仅更改width和的height属性值自动调整它img.
_{*没有像IE9中那样工作 - IE11,只有第一个圆圈}

示例6:CodePen - 控件的边框宽度_*的值stroke-width
_{不能像IE9中那样工作 - IE11,只有第一个圆圈}

--------------------------------------------

⁽¹⁾ - 来源:

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray
• https://css-tricks.com/almanac/properties/s/stroke-dasharray/
• Lea Verou - 失踪的切片 35:50-42:10