如何使用源生css3实现圆环加载进度条

2020-11-27 来源：赴品旅游

这次给大家带来如何使用源生css3实现圆环加载进度条，使用源生css3实现圆环加载进度条的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图：

当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了，还有一个超笨的方法就是写50个长方形分布在进度条上。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码：

<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	.wrap,.circle,.percent{
	position: absolute;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	}
	.wrap{
	top:50px;
	left:50px;
	background-color: #ccc;
	}
	.circle{
	box-sizing: border-box;
	border:20px solid #ccc;
	clip:rect(0,200px,200px,100px);
	}
	.clip-auto{
	clip:rect(auto, auto, auto, auto);
	}
	.percent{
	box-sizing: border-box;
	top:-20px;
	left:-20px;
	}
	.left{
	transition:transform ease;
	border:20px solid blue;
	clip: rect(0,100px,200px,0);
	}
	.right{
	border:20px solid blue;
	clip: rect(0,200px,200px,100px);
	}
	.wth0{
	width:0;
	}
	.num{
	position: absolute;
	box-sizing: border-box;
	width: 160px;
	height: 160px;
	line-height: 160px;
	text-align: center;
	font-size: 40px;
	left: 20px;
	top: 20px;
	border-radius: 50%;
	background-color: #fff;
	z-index: 1;
	}
	</style>
	<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<p class="wrap">
	<p class="circle">
	<p class="percent left"></p>
	<p class="percent right wth0"></p>
	</p>
	<p class="num"><span>0</span>%</p>
</p>
</body>
<script>
	var percent=0;
	var loading=setInterval(function(){
	if(percent>100){
	percent=0;
	$('.circle').removeClass('clip-auto');
	$('.right').addClass('wth0');
	}else if(percent>50){
	$('.circle').addClass('clip-auto');
	$('.right').removeClass('wth0');
	}
	$('.left').css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
	$('.num>span').text(percent);
	percent++;
	},200);
</script>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部栏目

如何使用源生css3实现圆环加载进度条