Comment créer un cercle de progression statique en utilisant uniquement CSS ?

Création d'un cercle de progression statique à l'aide de CSS

De nombreuses implémentations de barres de progression présentent des cercles continuellement animés qui progressent à 100 %. Cependant, si vous recherchez une barre de progression en cercle statique qui peut s'arrêter à des intervalles de pourcentage spécifiques, continuez à lire.

Pour créer un cercle de progression statique en utilisant du CSS pur, suivez ces étapes :

1. Définissez le Wrapper :

   • Établissez une classe wrapper pour contenir le cercle de progression et contrôler le découpage visibilité de la zone.
   • Définissez les propriétés de largeur et de hauteur pour définir les dimensions de la barre de progression.
   • Appliquez les propriétés position : absolue et clip pour contrôler la partie visible du cercle.

2. Créer le Cercle de Progrès :

   • Au sein le wrapper, ajoutez une classe de cercle pour l'élément de cercle de progression.
   • Spécifiez la largeur, la hauteur, la bordure et le rayon de bordure pour définir son apparence.
   • Utilisez position : absolue et clip pour masquer le partie souhaitée du cercle.

3. Animez la Progression :

   • Utilisez les attributs data-anim pour attribuer des sélecteurs d'animation aux éléments.
   • Définissez les paramètres d'animation de base, y compris le nombre d'itérations, le mode de remplissage et la fonction de synchronisation.
   • Utilisez -webkit-animation-delay pour contrôler le point de départ de l'animation.
   • Créez des images clés spécifiques pour faire pivoter le cercle de progression éléments de 0 à 180 ou 360 degrés.

4. Contrôler la visibilité du clip :

   • Créez une animation de fermeture rapprochée qui change la propriété du clip wrapper en auto, rendant le cercle entier visible.

Cette solution vous permet de spécifier le pourcentage auquel la barre de progression cessera de tourner, créant un cercle de progression statique qui reflète avec précision l'état de progression.

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!