Progress Bar Generator
Crea barre di avanzamento CSS personalizzate con anteprima live. Scegli stile, colori, raggio e ottieni HTML + CSS pronti.
① Imposta la percentuale e scegli lo stile ② Regola colori e altezza ③ Copia CSS e 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>Cos'è una barra di avanzamento CSS e quando usarla?
Una barra di avanzamento CSS è un componente UI che rappresenta visivamente il completamento di un'attività o uno stato di caricamento. Costruita con HTML e CSS puri, non richiede JavaScript per la visualizzazione statica. Il wrapper esterno fornisce il binario (sfondo), mentre il div interno si riempie proporzionalmente tramite width: {percentuale}%. Le barre a strisce usano repeating-linear-gradient a 45 gradi. Le barre animate applicano un'animazione background-position per simulare il movimento.
Domande frequenti
Una barra di avanzamento CSS è un componente visivo composto da due div annidati: un wrapper (la rotaia) e una barra interna la cui larghezza percentuale riflette il completamento.
Le strisce usano repeating-linear-gradient a 45 gradi alternando il colore della barra e una variante semitrasparente ogni 10px.
Entrambi usano lo stesso pattern repeating-linear-gradient. La versione animata applica in più un'animazione background-position che sposta il gradiente orizzontalmente.
Il wrapper deve essere impostato su width: 100% per riempire il suo contenitore. La barra interna usa una larghezza percentuale sempre relativa al wrapper.
Sì. Imposta una proprietà CSS personalizzata come --progress e aggiornala via element.style.setProperty("--progress", value + "%").
Barre arrotondate (border-radius: 999px) si addicono a UI moderne. Angoli netti (0) si abbinano a dashboard geometrici. Applica lo stesso valore sia al wrapper che alla barra.
Sì. Usa l'elemento HTML nativo <progress> per il significato semantico, oppure aggiungi role="progressbar" aria-valuenow aria-valuemin aria-valuemax al div wrapper.