Creando una sencilla barra de progreso con solo CSS: interactiva y sin JavaScript

Siguiendo con algunos experimentos CSS, hoy quiero mostrar cómo crear una barra de progreso con solo CSS, completamente interactiva y sin necesidad de JavaScript. No se trata solo de una animación automática, sino de una barra de progreso con estados reales, controlados por el usuario y gestionados únicamente con HTML y CSS.

En este tipo de pruebas suelo modificar varios aspectos del código original, pero en este caso el enfoque me funcionó tan bien desde el inicio que decidí mantener su lógica principal: usar radio buttons como sistema de estados y dejar que CSS haga todo el trabajo.

Por supuesto, el uso de las transiciones en CSS  para poder mover los cambios en la barra, es fundamental.

¿Qué es una barra de progreso y cuándo usar solo CSS?

Una barra de progreso es un componente visual que indica el avance de un proceso: carga, pasos completados, nivel alcanzado, etc. Normalmente se asocia a JavaScript, pero no siempre es necesario.

Diferencias entre una barra de progreso CSS y una con JavaScript

Cuando usas JavaScript, el progreso suele depender de datos dinámicos reales (subidas, descargas, cálculos). En cambio, una barra de progreso hecha solo con CSS es ideal cuando:

• El progreso es visual o demostrativo
• Los estados están predefinidos
• Buscas simplicidad y rendimiento
• Estás creando prototipos o experimentos CSS

En mis pruebas, este tipo de solución es perfecta cuando no necesitas lógica compleja y quieres mantener el código lo más limpio posible.

Ventajas y limitaciones de usar únicamente CSS

• Ventajas
  • No dependes de scripts
  • Mejor rendimiento
  • Código más fácil de mantener
  • Ideal para aprender selectores avanzados
• Limitaciones
  • No hay progreso dinámico real
  • Los estados deben estar definidos previamente

Siguiendo con algunos experimentos CSS, hoy veremos cómo crear una barra de progreso interactiva tal cual pueden ver en la imagen promocional de esta entrada.

Cómo crear una barra de progreso con solo CSS paso a paso

En realidad es bastante sencillos construir esta barra de progreso, como muchos otros experimentos que poseen distintos estatus en los que se emplea solo CSS, se usan los radios como elemento central; esta es la estructura HTML:

<input type="radio" name="progress" id="five">
<label for="five">5%</label>

<input type="radio" name="progress" id="twentyfive" checked>
<label for="twentyfive">25%</label>

<input type="radio" name="progress" id="fifty">
<label for="fifty">50%</label>

<input type="radio" name="progress" id="seventyfive">
<label for="seventyfive">75%</label>

<input type="radio" name="progress" id="onehundred">
<label for="onehundred">100%</label>

<div class="progress">
  <div class="progress-bar"></div>
</div>

Un punto interesante es que se interactúa solo con los label y estos con el radio (los cuales están ocultos) y esto se logra gracias al atributo for establecido en el label cuyo valor debe ser igual al del elemento id del radio para que puedan trabajar juntos.

Organización del marcado para que CSS pueda reaccionar

El orden del HTML es fundamental. Usamos el combinador ~ para que, cuando un radio esté activo, CSS pueda modificar la barra de progreso que aparece después en el DOM.

Cómo puedes darte cuenta, cada uno de los radios corresponde a un estatus de la barra de progreso los cuales variamos al momento de aplicar un clic sobre los estatus con el siguiente CSS:

#five:checked ~ .progress > .progress-bar {
	width: 5%;
	background-color: #f34213;
}
#twentyfive:checked ~ .progress > .progress-bar {
	width: 25%;
	background-color: #f27011;
}
#fifty:checked ~ .progress > .progress-bar {
	width: 50%;
	background-color: #f2b01e;
}
#seventyfive:checked ~ .progress > .progress-bar {
	width: 75%;
	background-color: #f2d31b;
}
#onehundred:checked ~ .progress > .progress-bar {
	width: 100%;
	background-color: #86e01e;
}

El resto del CSS es solo para aplicar estilos a la barra de progreso, label, cuerpo, etc.

Controlando el progreso con CSS puro

Uso del selector :checked para cambiar el estado

Cada estado se controla con una regla CSS específica:

#five:checked ~ .progress > .progress-bar {
 width: 5%;
 background-color: #f34213;
}

Los radios funcionan como un sistema de estados sin JavaScript, algo muy potente para este tipo de componentes.

Combinadores CSS aplicados a la barra de progreso

• ~ permite afectar elementos hermanos
• > asegura que solo se modifique el elemento correcto

Esta combinación evita efectos colaterales y mantiene el control total del estilo.

Asignando porcentajes reales sin JavaScript

Cada radio define un porcentaje concreto:

#fifty:checked ~ .progress > .progress-bar {
 width: 50%;
 background-color: #f2b01e;
}

No es una animación falsa: el ancho cambia realmente según el estado activo.

Estilos y animación de la barra de progreso CSS

El resto del CSS es puramente visual, pero importante para la experiencia. Ajustamos el ancho, colores y transiciones:

.progress {
 width: 100%;
 background: #eee;
 border-radius: 4px;
}
.progress-bar {
 height: 20px;
 width: 0;
 transition: width 0.4s ease;
}

Diferencia entre animación automática y progreso interactivo

A diferencia de muchas barras de carga animadas con @keyframes, aquí el usuario controla el progreso. Eso hace que el componente sea más útil en contextos reales como formularios por pasos.

Casos de uso reales de una barra de progreso sin JavaScript

• Formularios por pasos
  • Perfecto para indicar en qué paso se encuentra el usuario.
• Indicadores de estado visual
  • Procesos simulados, niveles, configuraciones.
• Prototipos y experimentos CSS
  • Ideal cuando quieres validar una idea rápida sin añadir lógica extra.

Preguntas frecuentes sobre barras de progreso con solo CSS

• ¿Se puede hacer una barra de progreso sin JavaScript?
  • Sí, siempre que el progreso se base en estados predefinidos.
• ¿Es recomendable para producción?
  • Depende del caso. Para progreso real, no. Para estados visuales, sí.
• ¿Se puede animar?
  • Sí, usando transition o @keyframes, aunque aquí el foco es la interacción.

Conclusión: cuándo conviene usar una barra de progreso CSS puro

Crear una barra de progreso con solo CSS no es solo posible, sino muy útil en determinados contextos. Este enfoque demuestra hasta dónde se puede llegar entendiendo bien selectores como :checked, la relación entre label e input, y los combinadores CSS.

Si el objetivo es aprender, experimentar o construir componentes ligeros y controlados, esta solución es más que suficiente. Y, además, es una excelente forma de profundizar en CSS más allá de lo básico.

Ejemplo completo de barra de progreso interactiva solo con CSS

El resultado final es una barra de progreso que responde instantáneamente al clic, sin una sola línea de JavaScript. En mis experimentos, este tipo de solución es ideal para demos, documentación y aprendizaje avanzado de CSS.

Con esto obtenemos el siguiente resultado: