How can I create this circular progress bar using CSS . Is it generally possible to achieve browser compatibility - ie10 +, FF, chrome, safari?
I think we can use SVG for this, but I do not know how to do it.

In a circle, there are small borders or shadows that dynamically change depending on the percentage progress. If this percentage is 100%, the border will fill the progress bar completely in a circle.

circular preloader

Source: Circle border progress bar

1 answer 1

This circular progress bar is in addition to my previous answer: circular progress bar
In this answer, SVG used in conjunction with the Snap.svg JS library to animate the circular blue line and the percent counter.

enter image description here

 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>

Answered: web-tiki