css3实现圆环加载进度条

最新推荐文章于 2024-05-13 18:48:47 发布

jl2577

最新推荐文章于 2024-05-13 18:48:47 发布

阅读量3w

点赞数 8

分类专栏： css3 文章标签： css3 loading

本文链接：https://blog.csdn.net/angeljsl/article/details/51208960

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前两天面试，让我现场用css3做一个圆环加载的进度条，没写出来，尴尬了。抽空参考了些网上的例子，做了下面这个demo。

效果图：

当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用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>
<div class="wrap">
	<div class="circle">
		<div class="percent left"></div>
		<div class="percent right wth0"></div>
	</div>
	<div class="num"><span>0</span>%</div>
</div>
</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>

jl2577

关注

8
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
css3实现圆环加载进度条

前两天面试，让我现场用css3做一个圆环加载的进度条，没写出来，尴尬了。抽空参考了些网上的例子，做了下面这个demo。效果图：当时的要求是让进度条以扇形渐变的效果加载。我想了半天，好像只有用border-img来做渐变图了。css3提供的渐变有线性渐变，径向渐变和重复渐变，想不出来怎样实现扇形渐变。不说了，上代码： Document *{ margin: 0
复制链接

扫一扫