CSS Kreis-Fortschrittsbalken-Generator
SVG-Fortschrittsring gestalten und Code kopieren
도구를 불러오는 중…
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Mit diesem Tool passt du Prozentwert, Größe, Strichstärke, Farben und Animationsgeschwindigkeit eines kreisförmigen Fortschrittsanzeigers per Schieberegler an und siehst die Live-Vorschau als SVG, bevor du den fertigen SVG- und CSS-Code kopierst. Es eignet sich für Entwickler und Designer, die Ladeanzeigen, Dashboards oder Statistik-Karten gestalten, und die gesamte Berechnung sowie Vorschau läuft ausschließlich im Browser, ohne Daten an einen Server zu senden.
Anleitung
- Stelle mit den Reglern Prozentwert, Strichstärke und Kreisgröße ein.
- Wähle Fortschrittsfarbe, Track-(Hintergrund-)Farbe und Textfarbe über den Farbwähler oder Hex-Code.
- Aktiviere bei Bedarf den zentrierten Text und die Übergangsanimation und stelle die Animationsdauer ein.
- Prüfe die Live-Vorschau und kopiere anschließend den generierten SVG- oder CSS-Code in dein Projekt.
FAQ
- Kann ich das generierte SVG direkt in React oder Vue verwenden?
- Ja, es handelt sich um reines SVG-Markup, das in jedem Framework funktioniert – in JSX musst du nur Attribute wie stroke-width in camelCase umbenennen.
- Animiert sich der Ring, wenn sich der Prozentwert ändert?
- Ist die Übergangsanimation aktiviert, wird eine CSS-Transition auf stroke-dashoffset angewendet, sodass sich der Ring beim Ändern des Prozentwerts in der App sanft füllt.
- Werden meine Eingaben an einen Server gesendet?
- Nein, sämtliche Berechnungen und die SVG-Vorschau laufen ausschließlich im Browser, ohne Speicherung oder Übertragung.