Maison > Article > interface Web > Comment utiliser la source CSS3 pour implémenter une barre de progression de chargement en anneau

Comment utiliser la source CSS3 pour implémenter une barre de progression de chargement en anneau

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

Cette fois, je vais vous montrer comment utiliser Yuansheng css3 pour réaliser la barre de progression du chargement de l'anneau Quelles sont les précautions pour utiliser Yuansheng css3 pour réaliser la barre de progression du chargement de l'anneau, comme suit C'est un cas pratique, jetons-y un coup d'œil.

Rendu :

L'exigence à cette époque était de rendre la barre de progression dégradée en forme d'éventail Chargement des effets. J'y ai réfléchi longtemps, et il semble que la seule façon de créer une image dégradée soit d'utiliser border-img. Une autre méthode super stupide consiste à écrire 50 rectangles répartis sur la barre de progression. Les dégradés fournis par CSS3 incluent des dégradés linéaires, des dégradés radiaux et des dégradés répétitifs. Je n'arrive pas à comprendre comment obtenir un dégradé en forme d'éventail. Ne parlons plus, passons au 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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !

Lecture recommandée :

Résumé de l'utilisation de base de js

Comment éviter les fonctionnalités et l'inférence du navigateur dans JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Expliquer en détail le rôle des valeurs de marge négatives (tutoriel graphique)Article suivant：Expliquer en détail le rôle des valeurs de marge négatives (tutoriel graphique)

Articles Liés

Voir plus