Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich mit SVG einen kreisförmigen prozentualen Fortschrittsbalken?

Wie erstelle ich mit SVG einen kreisförmigen prozentualen Fortschrittsbalken?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-07 15:37:03720Durchsuche

How to Create a Circular Percentage Progress Bar Using SVG?

Erstellen eines kreisförmigen Prozent-Fortschrittsbalkens

Die Anfrage betrifft einen radialen Fortschrittsindikator, der einen Prozentsatz innerhalb eines Kreises anzeigt. Um dies zu erreichen, gibt es sowohl bildbasierte als auch CSS-basierte Ansätze.

Bildbasierter Ansatz

Ein gelbes Kreisbild kann verwendet werden. Wenn jedoch die Absicht besteht, einen dynamischen Fortschrittsbalken zu erstellen, bietet CSS eine geeignetere Lösung.

CSS-basierter Ansatz mit SVG

SVG ist ein vielseitiges Werkzeug für Erstellen komplexer Formen, einschließlich kreisförmiger Formen. Hier ist ein SVG-basierter Ansatz zum Erstellen eines Fortschrittsbalkens:

<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>

Das Stroke-Dasharray wird animiert und der Prozentsatz wird mit jQuery aktualisiert:

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

DEMO

[Radialer Fortschrittsbalken](https://i.sstatic.net/cK5lv.jpg)

Dieser Ansatz bietet einen dynamischen und stilvollen Fortschrittsindikator, der einfach angepasst und integriert werden kann in Webdesigns.

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn