Progress Bar Generator
Erstelle benutzerdefinierte CSS-Fortschrittsbalken mit Live-Vorschau. Stil, Farben, Radius wählen und HTML + CSS exportieren.
① Prozentsatz und Stil festlegen ② Farben und Höhe anpassen ③ CSS und HTML kopieren
#C9B89A
#2A2A2A
Preview
Output
/* CSS */
.progress-wrap {
background: #2a2a2a;
border-radius: 999px;
height: 20px;
overflow: hidden;
position: relative;
}
.progress-bar {
width: 65%;
height: 100%;
border-radius: 999px;
transition: width 0.3s;
background: #c9b89a;
}
/* HTML */
<div class="progress-wrap">
<div class="progress-bar"></div>
</div>Was ist ein CSS-Fortschrittsbalken?
Ein CSS-Fortschrittsbalken ist ein UI-Element, das den Abschluss einer Aufgabe visuell darstellt. Erstellt mit reinem HTML und CSS, benötigt er kein JavaScript für die statische Anzeige. Der äußere Wrapper bildet die Spur (Hintergrund), während das innere div proportional über width: {prozent}% gefüllt wird. Gestreifte Balken verwenden repeating-linear-gradient in 45 Grad. Animierte Streifen wenden eine background-position-Keyframe-Animation an, um Bewegung zu simulieren.
Häufig gestellte Fragen
Ein CSS-Fortschrittsbalken besteht aus zwei verschachtelten Divs: einem Wrapper (der Spur) und einem inneren Balken, dessen prozentuale Breite den Abschluss widerspiegelt.
Streifen verwenden repeating-linear-gradient in 45 Grad und wechseln alle 10px zwischen Balkenfarbe und einer halbtransparenten Variante.
Beide verwenden dasselbe repeating-linear-gradient-Muster. Die animierte Version wendet zusätzlich eine background-position-Animation an.
Der Wrapper sollte auf width: 100% gesetzt werden. Der innere Balken verwendet eine prozentuale Breite, die immer relativ zum Wrapper ist.
Ja. Setze eine CSS-Custom-Property wie --progress und aktualisiere sie via element.style.setProperty("--progress", value + "%").
Abgerundete Balken (border-radius: 999px) eignen sich für moderne UIs. Scharfe Ecken (0) passen zu geometrischen Dashboards.
Ja. Verwende das native HTML-Element <progress> oder füge role="progressbar" aria-valuenow aria-valuemin aria-valuemax zum Wrapper hinzu.