Comment créer une barre de progression en pourcentage circulaire à l'aide de SVG ?

Création d'une barre de progression circulaire en pourcentage

La demande concerne un indicateur de progression radial qui affiche un pourcentage à l'intérieur d'un cercle. Pour y parvenir, il existe des approches basées sur l'image et basées sur CSS.

Approche basée sur l'image

Une image en forme de cercle jaune peut être utilisée. Cependant, si l'intention est de créer une barre de progression dynamique, CSS offre une solution plus adaptée.

Approche basée sur CSS utilisant SVG

SVG est un outil polyvalent pour créer des formes complexes, y compris circulaires. Voici une approche basée sur SVG pour créer une barre de progression :

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="45" fill="#FDB900"/>
  <path fill="none" stroke-linecap="round" stroke-width="5" stroke="#fff"
        stroke-dasharray="251.2,0"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80"/>
  <text>

Le trait-dasharray est animé et le pourcentage est mis à jour à l'aide de jQuery :

var count = $('#count');
$({Counter: 0}).animate({Counter: count.text()}, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});

DEMO

[Radial Progress Bar](https://i.sstatic.net/cK5lv.jpg)

Cette approche fournit un indicateur de progression dynamique et élégant qui peut être facilement personnalisé et intégré dans les conceptions Web.

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!