Progress Bar Generator
Maak aangepaste CSS-voortgangsbalken met live voorbeeld. Kies stijl, kleuren, radius en exporteer schone HTML + CSS.
① Stel het percentage in en kies een stijl ② Pas kleuren en hoogte aan ③ Kopieer de CSS en HTML
#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>Wat is een CSS-voortgangsbalk en wanneer gebruik je er een?
Een CSS-voortgangsbalk is een UI-component dat visueel de voltooiing van een taak of laadstatus weergeeft. Gebouwd met pure HTML en CSS, vereist het geen JavaScript voor statische weergave. De buitenste wrapper vormt het spoor (achtergrond), terwijl de binnenste div proportioneel wordt gevuld via width: {percentage}%. Gestreepte balken gebruiken repeating-linear-gradient onder 45 graden. Geanimeerde strepen passen een background-position-keyframe-animatie toe om beweging te simuleren.
Veelgestelde vragen
Een CSS-voortgangsbalk is een visueel component bestaande uit twee geneste divs: een wrapper (het spoor) en een binnenste balk waarvan het breedtepercentage de voltooiing weergeeft.
Strepen gebruiken repeating-linear-gradient onder 45 graden, afwisselend tussen de balkkleur en een licht transparante variant elke 10px.
Beide gebruiken hetzelfde repeating-linear-gradient patroon. De geanimeerde versie past daarnaast een background-position animatie toe die het verloop horizontaal verschuift.
De wrapper moet ingesteld worden op width: 100% om de container te vullen. De binnenste balk gebruikt een percentuele breedte die altijd relatief is aan de wrapper.
Ja. Stel een CSS custom property in zoals --progress en werk deze bij via element.style.setProperty("--progress", value + "%").
Afgeronde balken (border-radius: 999px) passen bij moderne UI's. Scherpe hoeken (0) passen bij geometrische dashboards. Pas dezelfde waarde toe op zowel wrapper als balk.
Ja. Gebruik het native HTML-element <progress> of voeg role="progressbar" aria-valuenow aria-valuemin aria-valuemax toe aan de wrapper div.