Nur CSS Tailwind CSS radialer Fortschritt – kreisförmiger Fortschrittsring mit Prozentanzeige. Farb- und Größenvarianten, kein JavaScript. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Radiale Fortschrittskomponenten zeigen den Fertigstellungsgrad in einem kreisförmigen Format an und bieten eine elegante Alternative zu linearen Fortschrittsbalken. Radial Progress wurde mit SVG-basierter Visualisierung und CSS-Animationen erstellt und verleiht Dashboards und Statusanzeigen visuelles Interesse. Das radiale Fortschrittssystem von Frutjam unterstützt mehrere Größen und Farben – ideal für Metriken, Abschlussverfolgung und Datenvisualisierung.
Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
| Klasse | Typ | Beschreibung |
|---|---|---|
| radial-progress | Base | Kreisförmiger Fortschrittsindikator, gesteuert durch --radial-progress--value |
| radial-progress-xs | Größe | Extra klein |
| radial-progress-sm | Größe | Klein |
| radial-progress-md | Größe | Mittel (Standard) |
| radial-progress-lg | Größe | Groß |
| radial-progress-xl | Größe | Extra groß |
| radial-progress-base | Farbe | Gedeckte Grundflächenfarbe |
| radial-progress-current | Farbe | Erbt explizit die aktuelle Textfarbe |
| radial-progress-primary | Farbe | Primäre Designfarbe |
| radial-progress-secondary | Farbe | Sekundäre Themenfarbe |
| radial-progress-accent | Farbe | Akzentfarbe des Themas |
| radial-progress-neutral | Farbe | Neutrale Themenfarbe |
| radial-progress-info | Farbe | Semantische Infofarbe |
| radial-progress-success | Farbe | Semantische Erfolgsfarbe |
| radial-progress-warning | Farbe | Semantische Warnungsfarbe |
| radial-progress-error | Farbe | Semantische Fehlerfarbe |
Grundlegende Verwendung
<div class="radial-progress" style="--radial-progress--value:70">70%</div> |
1 2 3 4 | function RadialProgress() { const progress = {"--radial-progress--value": 70} return <div className="radial-progress" style={progress}>70%</div> } |
Radiale Fortschrittsgrößen
1 2 3 4 5 | <div class="radial-progress radial-progress-xs" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-sm" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-md" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-lg" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-xl" style="--radial-progress--value:70">70%</div> |
Radiale Fortschrittsfarben
1 2 3 4 5 6 7 8 9 | <div class="radial-progress radial-progress-base" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-primary" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-secondary" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-accent" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-neutral" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-info" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-success" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-warning" style="--radial-progress--value:70">70%</div> <div class="radial-progress radial-progress-error" style="--radial-progress--value:70">70%</div> |
Radialer Fortschritt mit Beschriftung
Tasks Completed
1 2 3 4 5 6 | <div class="flex flex-col items-center gap-4"> <div class="text-center"> <div class="radial-progress radial-progress-xl radial-progress-primary" style="--radial-progress--value:85">85%</div> <p class="text-sm mt-2">Tasks Completed</p> </div> </div> |
Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?
Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Radialer Fortschritt-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.