DesarrolloLibre

Desarrollo Web, Android y mucho más

27-07-2016

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:


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Árbol arcoíris creciente

Árbol arcoíris creciente

Eye Candy

Eye Candy

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Algunos artículos que te pueden interesar

Creando una web básica con Flex en HTML

Creando una web básica con Flex en HTML

En esta entrada veremos cómo crear una web básica empleando flex con las propiedades flex-grow, flex-shrink y flex-basis.

Andrés Cruz 07-04-2016

Truco CSS: Construir flechas en los contenedores HTML

Truco CSS: Construir flechas en los contenedores HTML

En esta entrada explicaremos como crear contenedores con flechas o contenedores con una una bifurcación que le colocamos en el mismo.

Andrés Cruz 04-06-2015

¿Qué es LESS CSS?

¿Qué es LESS CSS?

LESS CSS es una extensión de CSS que nos permite agregar dinamismo al CSS tradicional.

Andrés Cruz 12-09-2013