Wie erstelle ich mit SVG und JavaScript einen kreisförmigen Prozent-Fortschrittsbalken?

Erstellen eines kreisförmigen Prozent-Fortschrittsbalkens

Um einen kreisförmigen Prozent-Fortschrittsbalken wie im Modell zu erstellen, sollten Sie SVG wegen verwenden seine Flexibilität beim Erstellen abgerundeter Formen.

SVG-Code:

<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">
    <animate attributeName="stroke-dasharray" from="0,251.2" to="251.2,0" dur="5s"/>           
  </path>
  <text>

CSS:

body {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

svg {
  width: 25%;
}

JavaScript (Optional):

Um den Fortschritt zu animieren und den Prozentsatz zu erhöhen, verwenden Sie den folgenden jQuery-Code:

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

Ergebnis:

Der SVG-Code erstellt einen kreisförmigen Fortschrittsbalken mit gelbem Hintergrund und weißer Fortschrittsanzeige. Die JavaScript-Animation erhöht den in der Mitte des Fortschrittsbalkens angezeigten Prozentsatz innerhalb von 5 Sekunden von 0 auf 100 %.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit SVG und JavaScript einen kreisförmigen Prozent-Fortschrittsbalken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!