ソース CSS3 を使用してリング読み込みプログレスバーを実装する方法

今回は、Yuansheng css3 を使用してリングの読み込みプログレスバーを実現する方法を説明します。実際のケースを見てみましょう。 レンダリング:

その時の要件は、プログレスバーに扇形のグラデーション効果をロードすることでした。ずっと考えていたのですが、グラデーション画像を作るにはborder-imgを使うしかないようです。もう一つの超バカな方法は、プログレスバー上に50個の四角形を分散して書くことです。 css3 によって提供されるグラデーションには、線形グラデーション、放射状グラデーション、繰り返しグラデーションが含まれます。扇形のグラデーションを実現する方法がわかりません。これ以上話す必要はありません。コードに進みましょう:

nbsp;html>


	<meta>
	<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></script>


<p>
	</p><p>
		</p><p></p>
		<p></p>
	
	<p><span>0</span>%</p>


<script>
	var percent=0;
	var loading=setInterval(function(){
		if(percent>100){
			percent=0;
			$(&#39;.circle&#39;).removeClass(&#39;clip-auto&#39;);
			$(&#39;.right&#39;).addClass(&#39;wth0&#39;);
		}else if(percent>50){
			$(&#39;.circle&#39;).addClass(&#39;clip-auto&#39;);
			$(&#39;.right&#39;).removeClass(&#39;wth0&#39;);
		}
		$(&#39;.left&#39;).css("-webkit-transform","rotate("+(18/5)*percent+"deg)");
		$(&#39;.num>span&#39;).text(percent);
		percent++;
	},200);
</script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

基本的なjsの使い方のまとめ

JSの機能とブラウザ推論を回避する方法

以上がソース CSS3 を使用してリング読み込みプログレスバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。