vue 做圆环进度条

最新推荐文章于 2024-09-25 15:06:46 发布

读着对白

最新推荐文章于 2024-09-25 15:06:46 发布

阅读量6.5k

点赞数

分类专栏： css 文章标签：进度条圆环进度条 css 做进度条在vue中使用圆环进度条

本文链接：https://blog.csdn.net/luoxuehui_blog/article/details/84784660

版权

本文介绍了如何使用CSS的clip属性在Vue中创建圆环进度条。由于canvas造成页面卡顿，作者选择了CSS方法。首先解释了clip:rect()属性的工作原理，然后逐步展示了如何画圆环并利用旋转实现圆环进度条效果。最后，将圆环进度条整合到Vue项目中，虽然无法直接添加动效，但提供了基本的实现思路。

摘要由CSDN通过智能技术生成

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

上面是昨天已经做出来的效果图，感觉还不错。本来准备用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); */
	/*  进度为1/4的圆环 */
	/* clip: rect(0, 200px, 100px,