Circle border progress bar

Question

How can I create this circular progress bar with CSS is it even possible (compatible IE10+, FF, chrome, safari...)?
I think we can use SVG for this but I don't know how to make this.

Around the circle, there is a small border or shadow that changes dynamically according to a progress percentage. If the percentage is 100%, the border will be completly around the circle filling the progress bar.

Can you please provide some code which your hand tried on it? — Draval, Jan 11 '17 at 08:48

web-tiki · Accepted Answer · 2020-09-18T13:33:58.367

This Circle progress bar is is adapted form this answer : circular progress bar

It uses SVG with Snap.svg to animate the blue stroke and JS for the counter :

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:25%;}

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

@web-tiki Please check this answer as well The problem is probably the same as in this [answer](https://stackoverflow.com/a/29512804/7394871) — Alexandr_TT, Sep 18 '20 at 07:58

score -1 · Answer 2 · answered Jan 11 '17 at 08:55

I think that website : https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9#.2fflbvwrt can help you

And you can check the demo here : http://jsfiddle.net/andsens/Yns9P/ at this line :

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

You can change attr('data-progress', Math.floor(Math.random() * 100)) to attr('data-progress', [your_pourcentage])

Circle border progress bar

2 Answers2