Граница прогресса границы круга

Question

Как я могу создать этот круговой индикатор выполнения с CSS, это даже возможно (совместимый IE10 +, FF, хром, сафари ...)?
Я думаю, мы можем использовать SVG для этого, но я не знаю, как это сделать.

Вокруг круга есть небольшая граница или тень, динамически изменяющаяся в зависимости от процента хода. Если процент составляет 100%, граница будет полностью закрыта вокруг круга, заполняя индикатор выполнения.

Answer 1

Этот Круг прогресс бар будет адаптировано форме этот ответ: circular progress bar

Он использует SVG с Snap.svg анимировать синий ход и JS для счетчика:

var count = $(('#count')); 
 
$({ Counter: 0 }).animate({ Counter: count.text() }, { 
 
    duration: 5000, 
 
    easing: 'linear', 
 
    step: function() { 
 
    count.text(Math.ceil(this.Counter)+ "%"); 
 
    } 
 
}); 
 

 
var s = Snap('#animated'); 
 
var progress = s.select('#progress'); 
 

 
progress.attr({strokeDasharray: '0, 251.2'}); 
 
Snap.animate(0,251.2, function(value) { 
 
    progress.attr({ 'stroke-dasharray':value+',251.2'}); 
 
}, 5000);

body{text-align:center;font-family:sans-serif;background:#080808;} 
 
svg{width:30%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="animated" viewbox="0 0 100 100"> 
 
    <path id="progress" stroke-width="3" stroke="#4596AB" fill="none" 
 
     d="M50 10 
 
      a 40 40 0 0 1 0 80 
 
      a 40 40 0 0 1 0 -80"> 
 
    </path> 
 
    <circle cx="50" cy="50" r="38" fill="transparent" stroke="#fff" stroke-width="1"/> 
 
    <text id="count" x="50" y="50" fill="#fff" text-anchor="middle" dy="7" font-size="20">100%</text> 
 
</svg>

Answer 2

Я думаю, что веб-сайт: https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9#.2fflbvwrt может помочь вам

И вы можете проверить демо здесь: http://jsfiddle.net/andsens/Yns9P/ на этой линии:

window.randomize = function() { 
    $('.radial-progress').attr('data-progress', Math.floor(Math.random() * 100)); 
} 

Вы можете изменить attr('data-progress', Math.floor(Math.random() * 100)) к attr('data-progress', [your_pourcentage])