Progress Bar Generator
Crea barras de progreso CSS personalizadas con vista previa en vivo. Elige estilo, colores, radio y exporta HTML + CSS.
① Establece el porcentaje y elige un estilo ② Ajusta colores y altura ③ Copia el CSS y el 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>¿Qué es una barra de progreso CSS?
Una barra de progreso CSS es un componente de UI que representa visualmente la finalización de una tarea. Construida con HTML y CSS puros, no requiere JavaScript para la visualización estática. El wrapper externo proporciona la pista (fondo), mientras que el div interno se llena proporcionalmente usando width: {porcentaje}%. Las barras rayadas usan repeating-linear-gradient a 45 grados. Las barras animadas aplican una animación background-position para simular movimiento.
Preguntas frecuentes
Una barra de progreso CSS es un componente visual formado por dos divs anidados: un wrapper (la pista) y una barra interna cuyo porcentaje de anchura refleja la finalización.
Las rayas usan repeating-linear-gradient a 45 grados alternando el color de la barra y una variante semitransparente cada 10px.
Ambos usan el mismo patrón repeating-linear-gradient. La versión animada aplica además una animación background-position que desplaza el gradiente horizontalmente.
El wrapper debe configurarse a width: 100% para llenar su contenedor. La barra interna usa un ancho porcentual siempre relativo al wrapper.
Sí. Establece una propiedad CSS personalizada como --progress y actualízala con element.style.setProperty("--progress", value + "%").
Las barras redondeadas (border-radius: 999px) se adaptan a interfaces modernas. Las esquinas nítidas (0) encajan en dashboards geométricos.
Sí. Usa el elemento HTML nativo <progress> o añade role="progressbar" aria-valuenow aria-valuemin aria-valuemax al div wrapper.