Home > Article > Web Front-end > How to use source css3 to implement a ring loading progress bar

How to use source css3 to implement a ring loading progress bar

php中世界最好的语言Original: 2018-06-04 11:14:572442browse

This time I will show you how to use Yuanshengcss3 to realize ring loading Progress bar, and use Yuanshengcss3 to realize ring loading progress bar What are the precautions, as follows This is a practical case, let’s take a look at it.

Rendering:

The requirement at that time was to make the progress bar gradient in a fan shape Effects loading. I thought about it for a long time, and it seems that the only way to make a gradient image is to use border-img. Another super stupid method is to write 50 rectangles distributed on the progress bar. The gradients provided by css3 include linear gradients, radial gradients and repeating gradients. I can't figure out how to achieve a fan-shaped gradient. No more talking, let’s get to the code:

<!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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to use source css3 to implement a ring loading progress bar

Related articles