Comment créer un cercle de progression CSS avec des arrêts en pourcentage personnalisés ?

Comment créer un cercle de progression CSS avec des arrêts en pourcentage personnalisés

Vous pouvez rencontrer des scénarios dans lesquels des barres de progression circulaires sont nécessaires, mais les cercles animés par défaut qui se remplissent à 100 % ne répond pas à vos spécifications. Dans cet article, nous montrerons comment créer un cercle de progression CSS qui peut être arrêté à des points de pourcentage spécifiques.

Implémentation CSS

Notre objectif est d'utiliser CSS pour réaliser ce cercle de progression avec des le pourcentage s’arrête. Voici comment procéder :

.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);
  }
}

Structure HTML

Une fois le CSS en place, vous pouvez créer le cercle de progression en utilisant la structure HTML suivante :

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

Ce code créera un cercle de progression qui commence par un demi-cercle (50 %) puis fera pivoter le côté gauche à 360 degrés et le côté droit à 180 degrés.

Conclusion

En utilisant cette technique CSS, vous pouvez désormais créer des barres de progression circulaires avec des arrêts en pourcentage personnalisés sans avoir besoin de JavaScript. Cela ouvre diverses possibilités pour concevoir des indicateurs de progrès personnalisés pour répondre à vos besoins spécifiques.

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!