环形加载进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{ margin: 0; font-family: "arial";}
        #wrap{background: rgba(255, 0, 0, 0.38); 400px; height: 400px;}
    </style>

    <script>
        window.onload = function(){
            var svgSN = "http://www.w3.org/2000/svg";
            var oWrap = document.getElementById("wrap");
            var oSvg = document.getElementById("svg1");
            function createTag(tag, objAttr){
                var oTag = document.createElementNS(svgSN, tag);
                for(var attr in objAttr){
                    oTag.setAttribute(attr, objAttr[attr]);
                }
                return oTag;
            }

            var outerXY = [{x: 80, y: 200}];
            var innerXY = [{x: 130, y: 200}];
            var centX = 200;
            var centY = 200;
            var outerR = 120;
            var innerR = 70;
            var angle = 360;
            var agSum = 0;
            var agNum = 0;
            var timer = null;

            var oText = createTag('text', {'x': centX, 'y': centY + 13, 'font-size': '30', 'text-anchor': 'middle', 'fill': '#fff', 'font-family': 'arial'});
            oText.innerHTML = agNum + "%";
            oSvg.appendChild(oText);

            for(var i=0; i<angle; i++){
                agSum++;
                var outerX = centX - Math.cos(agSum * Math.PI / 180) * outerR;
                var outerY = centY - Math.sin(agSum * Math.PI / 180) * outerR;
                outerXY.push({x: outerX, y: outerY});

                var innerX = centX - Math.cos(agSum * Math.PI / 180) * innerR;
                var innerY = centY - Math.sin(agSum * Math.PI / 180) * innerR;
                innerXY.push({x: innerX, y: innerY});
            }

            var oPath = createTag('path', {});
            oSvg.appendChild(oPath);
            var json = {};

            timer = setInterval(function(){

                agNum++;
                json = {'fill': 'rgba(255, 255, 255, 0.6)', 'd': 'M' + outerXY[0].x + ' ' + outerXY[0].y + 'A' + outerR + ' ' + outerR + ' 0 ' + (agNum > 180 ? 1 : 0) + ' 1 ' + outerXY[agNum].x + ' ' + outerXY[agNum].y + 'L' + innerXY[agNum].x + ' ' + innerXY[agNum].y + 'A' + innerR + ' ' + innerR + ' 0 ' + (agNum > 180 ? 1 : 0) + ' 0 ' + innerXY[0].x + ' ' + innerXY[0].y + 'Z'};

                for(var attr in json){
                    oPath.setAttribute(attr, json[attr]);
                }
                oText.innerHTML = Math.round(agNum/360 * 100) + "%";

                if(agNum == agSum){
                    clearInterval(timer);
                    alert("记载完成, 跳转页面");
                }
            }, 20);


        }
    </script>
</head>
<body>
    <div id="wrap">
        <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        </svg>
    </div>
</body>
</html>

效果展示：