Nur CSS Tailwind CSS-Fortschrittsbalken mit primären, sekundären, Akzent- und semantischen Farbvarianten. Größen xs-xl. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.
Fortschrittskomponenten visualisieren den Abschlussstatus von Aufgaben, Downloads oder mehrstufigen Prozessen. Fortschrittsbalken basieren auf semantischen HTML-Fortschrittselementen und Tailwind-CSS-Stil und kommunizieren den Fortschritt klar für Benutzer. Das Frutjam-Fortschrittssystem unterstützt mehrere Farben, Größen und Animationszustände für eine flexible Integration in Ladebildschirme, Formulare und Dashboards.
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 |
|---|---|---|
| progress | Base | Horizontaler Fortschrittsbalken |
| progress-primary | Farbe | Primäre Designfarbe |
| progress-secondary | Farbe | Sekundäre Themenfarbe |
| progress-accent | Farbe | Akzentfarbe des Themas |
| progress-neutral | Farbe | Neutrale Themenfarbe |
| progress-info | Farbe | Semantische Infofarbe |
| progress-success | Farbe | Semantische Erfolgsfarbe |
| progress-warning | Farbe | Semantische Warnungsfarbe |
| progress-error | Farbe | Semantische Fehlerfarbe |
Farbvarianten
Standard
1 2 3 4 5 | <progress class="progress w-56" value="0" max="100"></progress> <progress class="progress w-56" value="25" max="100"></progress> <progress class="progress w-56" value="50" max="100"></progress> <progress class="progress w-56" value="75" max="100"></progress> <progress class="progress w-56" value="100" max="100"></progress> |
1 2 3 4 5 | <progress className="progress w-56" value="0" max="100"></progress> <progress className="progress w-56" value="25" max="100"></progress> <progress className="progress w-56" value="50" max="100"></progress> <progress className="progress w-56" value="75" max="100"></progress> <progress className="progress w-56" value="100" max="100"></progress> |
Primär
html
1 2 3 4 5 | <progress class="progress progress-primary w-56" value="0" max="100"></progress> <progress class="progress progress-primary w-56" value="25" max="100"></progress> <progress class="progress progress-primary w-56" value="50" max="100"></progress> <progress class="progress progress-primary w-56" value="75" max="100"></progress> <progress class="progress progress-primary w-56" value="100" max="100"></progress> |
Sekundär
html
1 2 3 4 5 | <progress class="progress progress-secondary w-56" value="0" max="100"></progress> <progress class="progress progress-secondary w-56" value="25" max="100"></progress> <progress class="progress progress-secondary w-56" value="50" max="100"></progress> <progress class="progress progress-secondary w-56" value="75" max="100"></progress> <progress class="progress progress-secondary w-56" value="100" max="100"></progress> |
Akzent
html
1 2 3 4 5 | <progress class="progress progress-accent w-56" value="0" max="100"></progress> <progress class="progress progress-accent w-56" value="25" max="100"></progress> <progress class="progress progress-accent w-56" value="50" max="100"></progress> <progress class="progress progress-accent w-56" value="75" max="100"></progress> <progress class="progress progress-accent w-56" value="100" max="100"></progress> |
Neutral
html
1 2 3 4 5 | <progress class="progress progress-neutral w-56" value="0" max="100"></progress> <progress class="progress progress-neutral w-56" value="25" max="100"></progress> <progress class="progress progress-neutral w-56" value="50" max="100"></progress> <progress class="progress progress-neutral w-56" value="75" max="100"></progress> <progress class="progress progress-neutral w-56" value="100" max="100"></progress> |
Info
html
1 2 3 4 5 | <progress class="progress progress-info w-56" value="0" max="100"></progress> <progress class="progress progress-info w-56" value="25" max="100"></progress> <progress class="progress progress-info w-56" value="50" max="100"></progress> <progress class="progress progress-info w-56" value="75" max="100"></progress> <progress class="progress progress-info w-56" value="100" max="100"></progress> |
Erfolg
html
1 2 3 4 5 | <progress class="progress progress-success w-56" value="0" max="100"></progress> <progress class="progress progress-success w-56" value="25" max="100"></progress> <progress class="progress progress-success w-56" value="50" max="100"></progress> <progress class="progress progress-success w-56" value="75" max="100"></progress> <progress class="progress progress-success w-56" value="100" max="100"></progress> |
Warnung
html
1 2 3 4 5 | <progress class="progress progress-warning w-56" value="0" max="100"></progress> <progress class="progress progress-warning w-56" value="25" max="100"></progress> <progress class="progress progress-warning w-56" value="50" max="100"></progress> <progress class="progress progress-warning w-56" value="75" max="100"></progress> <progress class="progress progress-warning w-56" value="100" max="100"></progress> |
Fehler
html
1 2 3 4 5 | <progress class="progress progress-error w-56" value="0" max="100"></progress> <progress class="progress progress-error w-56" value="25" max="100"></progress> <progress class="progress progress-error w-56" value="50" max="100"></progress> <progress class="progress progress-error w-56" value="75" max="100"></progress> <progress class="progress progress-error w-56" value="100" max="100"></progress> |
Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?
Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Fortschritt-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.