SVG based circular progress bar

index.html

<div id="mapWrapper">
  <svg id="theMap" width="100%" height="100%"
       viewBox="0 0 200 200">

  <!--<circle cx="100" cy="100" r="100" fill="#660"/> -->
  <g id="arcs" transform=" translate(100 100) rotate(-90) scale(1 -1)">
    <path class="stroke" stroke="#fff" />
    <path class="fill" fill="#fff" />
  </g>
  <text x="100" y="100" dy="0.38em"></text>
  <!--<circle cx="100" cy="100" r="90" fill="#fff"/>-->
  </svg>
</div>

script.js

$(function(){
  var perc = 0;

  update();
  setInterval(update, 80);

  function lpad (s, c, l) {
    var m = l - s.length;
    while (m > 0) { s = c + s; m--; }
    return s;
  }
  
  function upto(s, c) {
    var i = s.indexOf(c);
    if (i === -1) return s
    else return s.substring(0, i);
  }
  
  function update(){
      $('#arcs path.stroke').attr('d', createSvgArc(0, 0, 80, 0, Math.PI*2, 60))
      $('#arcs path.fill').attr('d', createSvgArc(0, 0, 80, 0, perc, 60));
      $('#theMap text')[0].innerHTML = lpad(upto(""+perc/Math.PI/2*100, '.'), '0', 2);
      perc += Math.PI/50;
      if(perc >= Math.PI*2) perc = 0;
    }

    function createSvgArc (x, y, r, startAngle, endAngle, ri) {
      ri = ri || 0;
      if(startAngle>endAngle){
        var s = startAngle;
        startAngle = endAngle;
        endAngle = s;
      }
      if (endAngle - startAngle > Math.PI*2 ) {
        endAngle = Math.PI*1.99999;
      }
      
      var largeArc = endAngle - startAngle <= Math.PI ? 0 : 1;

      return ['M',
                x + Math.cos(startAngle)*ri,
                y - Math.sin(startAngle)*ri,
              'L',
                x + Math.cos(startAngle)*r,
                y - Math.sin(startAngle)*r, 
              'A', r, r, 0, largeArc, 0,
                x + Math.cos(endAngle)*r,
                y - Math.sin(endAngle)*r,
              'L',
                x + Math.cos(endAngle)*ri,
                y - Math.sin(endAngle)*ri,
              'A', ri, ri, 0, largeArc, 1,
                x + Math.cos(startAngle)*ri,
                y - Math.sin(startAngle)*ri,
             ].join(' ');
    }
  });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

#mapWrapper {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRTPktSUIr4IX2I8Y7ACMzNXqY-aTs6R4w3CTfxmE673Exooo2q7xUXUbM)
}

#theMap {
  background-color: rgb(150,150,150);
  opacity: 0.8;
  border-radius: 50%;
}

#theMap text {
  fill: white;
  font-size: 40px;
  text-anchor: middle;
}

SVG based circular progress bar.markdown

SVG based circular progress bar

Forked from smlsvnssn's Pen Svg circle segment.

A Pen by Captain Anonymous on CodePen.

License.