js生成环形进度条

百度到 jquery+css 生成 环形进度条
http://www.w3cplus.com/css3/create-radial-progress-bar-with-jQuery-and-css3.html
其中根据两种进度条颜色 有两个demo。

但是其中的 js 需要先引用jquery 才能用

改进一下，
不需要jquery

<script>
    var ss = document.getElementById('s').innerHTML.substr(0,3);
    /*当span中数值为xx%时，需要截取*/
    console.log(ss);
        var num = ss * 3.6;
        if (num<=180) {
            document.getElementById('circleright').style.transform="rotate(" + num + "deg)"; 
        } else {
            document.getElementById('circleright').style.transform="rotate(180deg)";

            document.getElementById('circleleft').style.transform="rotate(" + (num - 180) + "deg)";
        };

</script>

其中class=“right”的div 加了id=”circleright” ，
同理left加了id=”circleleft”
span加了id=”s”

虽然jquery并不大，几十kb，但是应尽量减小流量。