您的位置：首页 > 其它

SVG实现圆环loading进度效果实例页面

2015-08-08 11:43 585 查看

<svg width="440" height="440" viewbox="0 0 440 440">
<circle cx="220" cy="220" r="170" stroke-width="50" stroke="#D1D3D7" fill="none"></circle>
<circle cx="220" cy="220" r="170" stroke-width="50" stroke="#00A5E0" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069"></circle>
</svg>
<p>拖我：<input id="range" type="range" min="0" max="100" value="0" style="width:300px;"></p>

<script>
if (window.addEventListener) {
var range = document.querySelector("#range"), circle = document.querySelectorAll("circle")[1];
if (range && circle) {
range.addEventListener("change", function() {
var percent = this.value / 100, perimeter = Math.PI * 2 * 170;
circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
});
}
}
</script>

数字跳动

<style>
.num {
width: 40px; height: 40px;
object-fit: none;
object-position: 0 0;
transition: object-position .25s;
}
.num0 {  }
.num1 { object-position: 0 -40px; }
.num2 { object-position: 0 -80px; }
.num3 { object-position: 0 -120px; }
.num4 { object-position: 0 -160px; }
.num5 { object-position: 0 -200px; }
.num6 { object-position: 0 -240px; }
.num7 { object-position: 0 -280px; }
.num8 { object-position: 0 -320px; }
.num9 { object-position: 0 -360px; }
</style>

<body>
<div class="demo">
<p><strong>显示的数字是(100~999)：<input type="number" value="0" min="0" max="999"></strong></p>
<img src="http://www.zhangxinxu.com/study/201503/icons-ol.png" class="num num0">
<img src="http://www.zhangxinxu.com/study/201503/icons-ol.png" class="num num0">
<img src="http://www.zhangxinxu.com/study/201503/icons-ol.png" class="num num0">
</div>
</body>

<script>
if (window.addEventListener) {
var eleNums = document.querySelectorAll(".num");
document.querySelector(".demo input").addEventListener("change", function() {
var value = this.value;
if (!value ) { value =0;}
this.value = value;
var deg = this.value.split("");
switch(deg.length){
case 1:deg.forEach(function(x, y) {
eleNums[0].className="num num"+0;
eleNums[1].className="num num"+0;
eleNums[y+2].className = "num num" + x;
});
break;
case 2: deg.forEach(function(x, y) {
eleNums[0].className="num num"+0;
eleNums[y+1].className = "num num" + x;
});
break;
case 3:deg.forEach(function(x, y) {
eleNums[y].className = "num num" + x;
});
}
});
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航