阿里云优惠活动,点击链接进行购买: 一年仅需89元即可以购买服务器~。我个人服务器为2核4G配置,也更加推荐购买 2核4G三年799元 配置的服务器。

# css3实现圆环加载进度条动画

最近有人问我关于css3圆环的问题,要实现一个圆环,并且有加载特效。于是我看了看一般关于圆环实现的原理,以及自己手写了一个加载动画。可能体验还不是特别好,但是能用。话不多说,一下是代码:

####html结构

<div class="circle">
	<div class="left">
		<div class="left_con"></div>
	</div>
	<div class="right">
		<div class="right_con"></div>
	</div>
	<div class="mask">
		<span>60</span>%
	</div>
</div>

####css

.circle{
	width: 200px;
	height: 200px;
	position: relative;
	border-radius: 50%;
	background:  rgba(0,120,200,0.2);
}
.circle .left,.circle .right{
	width: 200px;
	height: 200px;
	position: absolute;
	top: 0;
	left: 0;
}
.left{
	clip: rect(0,100px,auto,0);
}
.right{
	clip: rect(0,auto,auto,100px);
}
.left_con,.right_con{
	display: block;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: rgb(0,120,200);	
	position: absolute;
	top: 0;
	left: 0;
}
.left_con{
	clip: rect(0,100px,auto,0);
}
.right_con{
	clip: rect(0,auto,auto,100px);
}
.mask {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	left: 25px;
	top: 25px;
	background: #FFF;
	position: absolute;
	text-align: center;
	line-height: 150px;
	font-size: 16px;
}

为操作方便引入了jq

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

####js代码

var annulus = function(speed){
	var _this = this;
	_this.speed = speed||10;
	function init(){
		circle();
	}
	function circle(){
		$('.circle').each(function(index, el) {
			var numStart = 0;
			var num = $(this).find('span').text() * 3.6;
			var timer = null;
			var that = this;
			timer = setInterval(function(){
				if(numStart>num){
					clearInterval(timer);
					tiemr = null;
				}
				animateLoading(that,numStart);
				numStart += 3.6;
			},_this.speed);
		});
	}
	function animateLoading(_this,num){
		if (num <= 180) {
			$(_this).find('.right_con').css({'transform':"rotate(" + num + "deg)"});

		} else {
			$(_this).find('.right_con').css({'transform': "rotate(180deg)"});
			$(_this).find('.left_con').css({'transform': "rotate(" + (num - 180) + "deg)"});
		};
	};
	return {
		init:init
	}
}

var a = new annulus(10);
a.init();
Last Updated: 3/30/2020, 11:46:29 AM