css
.chart-circle-bg{
fill:none ;
stroke:#E4EAF5 ;
stroke-width:10;
stroke-miterlimit:10;
cx:100;
cy:100;
r:55.056;
}
.chart-circle-line{
fill:none;
stroke-linecap: round;
animation: spin 4s infinite linear;
stroke-width:10;
stroke-miterlimit:10;
}
js
<script>
$('input').bind('input propertychange', the_change);
function the_change(){
var it = $(this);
var css=($(this).attr("class"));
var target=$(".chart-circle-line");
var js_target=document.getElementsByClassName("chart-circle-line")[0].getBoundingClientRect();
var h=js_target.height||Bottom - Top;
var w=js_target.width||Right - Left;
switch (css){
case "ray":
target.css("stroke-dasharray",it.val()/100*h*Math.PI+" "+it.val()/100*w*Math.PI)
break;
case "set":
target.css("stroke-dashoffset",it.val()/100*h*Math.PI)
break;
}
}
</script>
html
<svg class="f3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<g >
<circle class="chart-circle-bg" />
</g>
<defs class="">
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF675C;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#FF325C;stop-opacity:1"/>
</linearGradient>
</defs>
<g >
<path class="chart-circle-line" xmlns="http://www.w3.org/2000/svg"
stroke="url(#orange_red)"
d="M100,44.944c30.407,0,55.056,24.649,55.056,55.056 c0,30.406-24.648,55.057-55.056,55.057c-30.406,0-55.056-24.65-55.056-55.057C44.944,69.593,69.594,44.944,100,44.944"
/>
</g>
</svg>
<input class='ray' >
<input class='set' >