html,body,svg { height:100% }

by imys

HTML

<svg width="500px" height="500px" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <path transform="translate(150, 150)" fill="none" 
      stroke-linecap="round" stroke="#999" 
      stroke-width="13"
      d="M 0 -100 A 100 100 0 1 1 -0.00 -100"
      id="ring"
      />
    </svg>

CSS

html,body,svg { height:100% }

JavaScript

var path = document.getElementById('ring');
    var r=100;

    var progress=0.8;

    //将path平移到我们需要的坐标位置
    ring.setAttribute('transform', 'translate('+r+','+r+')');

    // 计算当前的进度对应的角度值
    var degrees = progress * 360;  

    // 计算当前角度对应的弧度值
    var rad = degrees* (Math.PI / 180);

    //极坐标转换成直角坐标
    var x = (Math.sin(rad) * r).toFixed(2);
    var y = -(Math.cos(rad) * r).toFixed(2);

    //大于180度时候画大角度弧，小于180度的画小角度弧，(deg > 180) ? 1 : 0
    var lenghty = window.Number(degrees > 180);

    //path 属性
    var descriptions = ['M', 0, -r, 'A', r, r, 0, lenghty, 1, x, y];

    // 给path 设置属性
    path.setAttribute('d', descriptions.join(' '));