CSS-Kreisdiagramm-Generator (Fortschrittsring)
SVG-Fortschrittsringe in Farbe und Größe einstellen und als Code exportieren
Stellen Sie Fortschritt, Größe, Linienstärke, Farben und Animationsdauer per Schieberegler ein, sehen Sie den kreisförmigen Fortschrittsbalken sofort in der Vorschau und kopieren Sie den fertigen SVG- und CSS-Code. Das Werkzeug richtet sich an Entwicklerinnen und Designer, die runde Anzeigen für Dashboards, Ladeindikatoren oder Statistikkarten gestalten. Sämtliche Berechnungen und die Vorschau finden ausschließlich im Browser statt – nichts wird an einen Server gesendet.
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Stellen Sie mit den Schiebereglern den Fortschritt in Prozent, die Linienstärke und den Durchmesser ein.
- Legen Sie Fortschrittsfarbe, Hintergrundfarbe der Spur und Textfarbe über den Farbwähler oder per Codeeingabe fest.
- Bestimmen Sie, ob der Text in der Mitte angezeigt wird, ob eine Übergangsanimation läuft und wie lange sie dauert.
- Prüfen Sie das Ergebnis in der Live-Vorschau und kopieren Sie anschließend den SVG- oder CSS-Code in Ihr Projekt.
FAQ
- Kann ich den erzeugten Code unverändert in React oder Vue einsetzen?
- Ja, es ist reines SVG-Markup und lässt sich in jedes Framework einfügen. Für JSX schreiben Sie Attribute wie stroke-width bei Bedarf einfach in CamelCase.
- Läuft die Animation automatisch, wenn sich der Fortschritt ändert?
- Wenn die Übergangsanimation aktiviert ist, wirkt die CSS-Transition auf den Wert stroke-dashoffset. Ändert sich der Fortschritt zur Laufzeit, füllt sich der Ring dadurch weich auf.
- Werden meine Eingaben auf einem Server gespeichert?
- Nein. Berechnung und SVG-Rendering geschehen vollständig im Browser; nichts wird gespeichert oder übertragen.