У вас есть индикатор выполнения бутстрапов, преобразованный в круг и изображение внутри него

Я пытаюсь использовать индикатор выполнения бутстрапа, чтобы он мог обернуть вокруг моего изображения по кругу вокруг края.

Как и в приведенном ниже коде на html, я бы предпочел установить ширину в div так, как это делает bootstrap.

Вопрос: Как я могу использовать панель выполнения 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>

ОТВЕТЫ

Ответ 1

Вы можете добиться этого с помощью "автоматизированного" круга SVG, автоматизированного, потому что вам не нужны жесткие значения кода, такие как размеры ширины, высоты, радиуса или размера viewBox, все, что ему нужно, чтобы соответствующий тег img имел width и height, а также атрибут stroke-width для svg circle.

Все дальнейшие вычисления зависят от значений этих атрибутов, таких как расположение изображения и круга, установка ширины и высоты для svg, а также значения радиуса и окружности круга. также, если у вас на вашей странице больше одного круга, круги не должны иметь одинаковой ширины и размера, каждый круг будет принимать размеры из соответствующего img.

Вся магия находится в этой строке:

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

Где circum - длина окружности круга, концепция, лежащая в основе этого, управляет значениями stroke-dasharray (1) с помощью нашего script. например, предположим, что вы вызываете функцию, предоставляющую значение 70, и пусть < <27 > 500, так что это будет:

stroke-dasharray: 350 500

думайте об этом, как второе значение "500" - это полный круг, первое значение "350" - это то, где останавливается удар.

Чтобы установить значения определенного круга, просто вызовите функцию miProgressbar(), передав элемент circle и необходимое значение, например:

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


Обновлено:. Все примеры, приведенные ниже, были протестированы в браузерах Chrome, Firefox, IE9-IE11 и Vivaldi, и все они работали даже в IE9 +, за исключением того, что в IE9-IE11 example5 и example6 только первые круги штрихи, не уверены в современных версиях Safari, Opera и Edge.


Пример 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>

Имейте в виду, что вы даже можете вводить SVG-код через javascript, используя .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 - анимация

Вы можете анимировать круговой индикатор выполнения, передавая разные значения отношения -i.e увеличения - отношения к функции 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, только первый круг

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

(1) - источники: