vue 做圆环进度条

昨天公司要做一个类似于这样的效果：

上面是昨天已经做出来的效果图，感觉还不错。本来准备用canvas来做，但是有页面上有很多圆环，造成了很多canvas同时存在的时候页面卡顿，所以用的css来做的。

1. clip:rect(0, 150px, 150px, 75px);

先给大家说下这个属性，裁剪。此属性为CSS2.1规范，使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。此属性有点类似于overflow实现生硬的剪裁。这个属性比较冷门，但是在一些特殊情况下还是有很好的效果的。建议大家去看下张鑫旭大佬的https://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/文章，此文章对clip有比较详细的解释，在这里我就不画蛇添足了。上面的效果就是基于此属性实现的。

2.先画个圆环，再使用此属性看看

/* 外圆  */		
.outside-round {
    width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #f00;
	position: relative;
}
/* 内圆  */
.inside-round {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background-color: #ff0;
}
/* 圆环 用20像素的边框实现 */
.yuanhuan {
	box-sizing: border-box; 
	position: absolute; 
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 20px solid #3C8CFF;
	/*  进度为一半的圆环 */
	/* clip: rect(0, 200px, 200px, 100px); */