Comment créer un cercle de progression CSS qui s'arrête à des pourcentages spécifiques ?

Cercle de progression CSS avec indication d'achèvement partiel

Introduction :

Les barres de progression circulaires sont un élément d'interface utilisateur commun utilisé pour indiquer la progression ou l'état d'achèvement. Cependant, de nombreuses barres de progression CSS affichent des animations complètes qui atteignent 100 %. Cet article montre comment créer un cercle de progression CSS qui peut s'arrêter à des pourcentages spécifiques, comme le montre la capture d'écran ci-dessous :

[Capture d'écran des barres de progression circulaires avec achèvement partiel]

Solution :

Pour y parvenir, nous utilisons des découpages et des animations CSS. La propriété clip permet de masquer une partie du cercle de progression, tandis que la propriété animation définit la rotation du cercle.

Code CSS :

.wrapper {
  width: 100px;
  height: 100px;
  position: absolute;
  clip: rect(0px, 100px, 100px, 50px);
}

.circle {
  width: 80px;
  height: 80px;
  border: 10px solid green;
  border-radius: 50px;
  position: absolute;
  clip: rect(0px, 50px, 100px, 0px);
}

div[data-anim~=base] {
  -webkit-animation-iteration-count: 1; 
  -webkit-animation-fill-mode: forwards; 
  -webkit-animation-timing-function:linear; 
}

.wrapper[data-anim~=wrapper] {
  -webkit-animation-duration: 0.01s; 
  -webkit-animation-delay: 3s; 
  -webkit-animation-name: close-wrapper; 
}

.circle[data-anim~=left] {
  -webkit-animation-duration: 6s; 
  -webkit-animation-name: left-spin;
}

.circle[data-anim~=right] {
  -webkit-animation-duration: 3s; 
  -webkit-animation-name: right-spin;
}

@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(180deg);
  }
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes close-wrapper {
  to {
    clip: rect(auto, auto, auto, auto);
  }
}

Code HTML :

<div class="wrapper" data-anim="base wrapper">
  <div class="circle" data-anim="base left"></div>
  <div class="circle" data-anim="base right"></div>
</div>

Cette solution garantit que le cercle de progression s'anime en douceur, avec la possibilité de faire une pause à des moments précis. pourcentages, comme vous le souhaitez.

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!