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; como muchos otros experimentos presentados aquí a los cuales generalmente modifico uno que otros aspecto, pero este me gusto como fue construido y es idéntico al que pueden encontrar en el siguiente enlace Animated Progress Bar only CSS.

Construyendo nuestra barra de progreso

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" class="radio" name="progress" value="five" id="five">
<label for="five" class="label">5%</label>

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

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

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

<input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
<label for="onehundred" class="label">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.

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.

Con esto obtenemos el siguiente resultado: