Comment arrêter un cercle de progression CSS à un pourcentage spécifique ?

Cercle de progression CSS : contrôle du pourcentage d'arrêt

En utilisant CSS, vous pouvez créer des cercles de progression qui indiquent visuellement les niveaux de progression. En règle générale, les barres de progression remplissent tout le cercle une fois le processus terminé à 100 %. Cependant, vous pouvez rencontrer des situations dans lesquelles vous devez arrêter le cercle de progression à des pourcentages spécifiques.

Pour y parvenir, nous pouvons tirer parti du découpage et de l'animation CSS. Décomposons le code fourni dans le violon :

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

La classe .wrapper définit le conteneur externe qui contiendra le cercle de progression. Nous définissons la largeur et la hauteur sur 100 px et les positionnons de manière absolue. Surtout, nous appliquons une propriété clip pour masquer la moitié de la barre de progression (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);
}

Dans le .wrapper, nous créons le cercle de progression réel à l'aide du . classe en cercle. Nous lui donnons la taille et le style souhaités avec une bordure verte et des coins arrondis. Une autre propriété de clip importante est appliquée pour rendre le cercle visible uniquement dans la moitié droite du conteneur.

Le code restant utilise des animations CSS et des attributs de données pour contrôler le comportement du cercle de progression. En ajustant les propriétés du clip dans les images clés, nous pouvons limiter le mouvement du cercle à un pourcentage spécifique. Par exemple, au violon, le cercle effectue une demi-rotation pour s'arrêter à 50%.

En combinant ces techniques, vous pouvez créer des cercles de progression CSS qui indiquent dynamiquement les pourcentages d'achèvement sans boucles animées.

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!