html5 svg 圆形进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5中的SVG属性实现圆形进度条效果</title>
<style>
#a{color:red;}
</style>
</head>
<body>
<svg width="440" height="440">
<text style="fill:black;" font-size="80" x="160" y="240" width="440" height="440" id="a">30%</text>
<circle cx="220" cy="220" r="170" stroke-width="40" stroke="#C9CACA" fill="none"></circle>
<circle id="c1" cx="220" cy="220" r="170" stroke-width="40" stroke="#E73468" fill="none"
transform="matrix(0,-1,1,0,0,440)" stroke-dasharray=""></circle>
</svg>
<script>
var circle = document.getElementById("c1");
var a = document.getElementById("a").innerHTML;
var b=parseInt(a)/100;
var percent = 0, perimeter = Math.PI * 2 * 170;
setInterval(function () {
if(percent<b){
circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
percent+=1/100;
}
},100);
</script>
</body>
</html>
html5 svg 圆形进度条更多相关文章
网页中mobile-agent的meta信息，这样添加才更专业
万象更新 Html5 - css: float 布局: 基础
万象更新 Html5 - css: float 布局: 通过 float 布局实现 3 栏式布局
万象更新 Html5 - css: flex 布局: flex-direction, flex-wrap, flex-flow
万象更新 Html5 - css: flex 布局: justify-content, align-items, align-content, align-self
万象更新 Html5 - css: flex 布局: order, flex-grow, flex-shrink, flex-basis, flex
万象更新 Html5 - css: position 布局: 定位（static, relative, absolute, fixed）
万象更新 Html5 - css: overflow 布局: 内容溢出时的样式
万象更新 Html5 - css: selector 选择器: 属性选择器（attribute selector）