Comment créer une barre de progrès circulaire avec CSS

Créer une barre de progrès en anneau à l'aide de CSS peut être réalisée par le biais de la conique-gradient ou du chemin de clip et de la rotation. Le premier convient aux progrès statiques ou à la mise à jour JavaScript, tandis que le second est plus adapté à l'animation en douceur; Construisez une apparence circulaire à travers les variables CSS et les pseudo-éléments, contrôlez la progression de la transformation: rotation (), et ajoutez la transition pour réaliser des effets d'animation, prends en charge les couleurs personnalisées, l'épaisseur et les étiquettes centrales, et sélectionnez des méthodes appropriées basées sur la compatibilité du navigateur et les exigences d'animation.

La création d'une barre de progrès circulaire avec CSS est un moyen propre de représenter visuellement des pourcentages de progrès ou d'achèvement sur une page Web. Bien que Pure CSS ait des limites pour les mises à jour dynamiques, vous pouvez construire une barre de progrès circulaire fonctionnelle et animée en utilisant une combinaison de CSS et un HTML minimal. Voici comment.

1. Utilisez une approche CSS uniquement avec des pseudo-éléments et une rotation des frontières

Une méthode courante utilise un conteneur avec un pseudo-élément qui tourne pour simuler le remplissage de progrès. Cela fonctionne bien pour les barres statiques ou semi-dynamiques (mise à jour via des classes JavaScript).

Structure HTML:

 <div class = "Circular-Progress" style = "- Progress: 75;"> </div>

CSS:

 .Circular-Progress {
  Largeur: 100px;
  hauteur: 100px;
  Border-Radius: 50%;
  Contexte: gradient conique (
    # 4CAF50 var (- progrès),
    # e0e0e0 var (- progrès)
  ));
  Position: relative;
}

.Circular-Progress :: avant {
  contenu: '';
  Position: absolue;
  en haut: 50%;
  Gauche: 50%;
  Transformer: traduire (-50%, -50%);
  Largeur: 80%;
  hauteur: 80%;
  Contexte: blanc;
  Border-Radius: 50%;
}

Cela crée un cercle rempli jusqu'au pourcentage défini par la variable CSS --progress (par exemple, 75% ). Le conic-gradient dessine l'arc coloré, et le ::before le pseudo-élément ne masque le centre pour le faire ressembler à une bague.

Remarque: conic-gradient est bien soutenu dans les navigateurs modernes mais peut avoir besoin de secours pour les plus âgés.

2. Créez une barre de progression de style anneau à l'aide de la bordure et du chemin de clip

Si vous voulez une trait circulaire mince (comme un fileur de chargement), utilisez un élément bordé à l'intérieur d'un conteneur coupé.

HTML:

 <div class = "progress-ring">
  <div class = "Progress-Fill"> </div>
</div>

CSS:

 .progress-ring {
  Largeur: 100px;
  hauteur: 100px;
  Border-Radius: 50%;
  Contexte: # E0E0E0;
  Position: relative;
}

.progress-fill {
  Position: absolue;
  Largeur: 100%;
  hauteur: 100%;
  Border-Radius: 50%;
  Clip: RECT (0px, 100px, 100px, 50px);
  Contexte: # 4CAF50;
  transformée: rotation (135deg); / * Commencer par le haut * /
}

.progress-fill :: avant {
  contenu: '';
  Position: absolue;
  en haut: 0;
  à gauche: 0;
  Largeur: 100%;
  hauteur: 100%;
  Border-Radius: 50%;
  Clip: RECT (0px, 50px, 100px, 0px);
  Contexte: # 4CAF50;
  transformée: rotation (90deg); / * Ajuster en fonction des progrès * /
  Transform-Origin: 50% 50%;
}

Pour animer cela avec un pourcentage spécifique (par exemple, 60%), vous calculeriez l'angle de rotation: 360 * (progress / 100) . Vous pouvez mettre à jour cela via JavaScript en modifiant la valeur transform: rotate() sur .progress-fill::before .

3. Ajouter une animation et des transitions en douceur

Pour faire en sorte que la barre anime en douceur lorsque les progrès changent, utilisez les transitions CSS. Cependant, conic-gradient et clip ne sont pas directement animéables, vous pouvez donc animer la transform: rotate() sur l'élément de remplissage.

Exemple avec animation:

 .progress-fill :: avant {
  transition: transformer 0,5 s facilité;
}

Puis mettez à jour la rotation via JavaScript:

 const fill = document.QuerySelector ('. Progress-Fill :: avant');
// pas directement possible - utilisez plutôt un emballage ou une bascule de classe

Une meilleure approche: enveloppez le remplissage dans un récipient et tournez-le:

 <div class = "progress-ring">
  <div class = "Progress-mask">
    <div class = "Progress-Fill"> </div>
  </div>
</div>

 .Progress-mask {
  Position: absolue;
  Largeur: 100%;
  hauteur: 100%;
  Clip: RECT (0, 100px, 100px, 50px);
  Transformer: Rotation (0deg); / * Contrôlé par JS * /
}

.progress-fill {
  Largeur: 100%;
  hauteur: 100%;
  Border-Radius: 50%;
  Contexte: # 4CAF50;
}

Utilisez maintenant JavaScript pour définir la rotation:

 fonction setProgress (pour cent) {
  const RotateDeg = pour cent * 3,6; // 360/100
  document.QuerySelector ('. Progress-mask'). style.transform = 
    `rotation ($ {rotatedeg} deg)`;
}

4. Personnaliser l'apparence

• Changez l'épaisseur de l'anneau en ajustant la découpe intérieure ou en utilisant une bordure à la place.
• Ajoutez une étiquette au centre à l'aide d'un élément enfant.
• Soutenir le thème avec les variables CSS:

   .Circular-Progress {
    - Progress: 50%;
    --FG-Color: # 4CAF50;
    --BG-Color: # E0E0E0;
    Contexte: gradient conique (
      var (- fg-color) var (- progress),
      var (- bg-coulor) var (- progress)
    ));
  }

  Fondamentalement, c'est un mélange de gradients intelligents, d'écrasement et de rotation. La méthode de gradient conique est la plus simple pour les valeurs statiques ou mise à jour JS. Pour les animations plus lisses, la méthode Rotate Clip-Path donne plus de contrôle. Choisissez en fonction des besoins de support et d'animation de votre navigateur.

  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!