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:

Ayúdanos a seguir creciendo

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Gradientes sobre el texto

Gradientes sobre el texto

Loader cuadrado

Loader cuadrado

Loader variados con CSS

Loader variados con CSS

Algunos artículos que te pueden interesar

Usando CSS para validar visualmente campos del formulario

Usando CSS para validar visualmente campos del formulario

Con HTML5 podemos utilizar el atributo required para indicarle al navegador que este campo es requerido.

Andrés Cruz 19-08-2013

Dando los primeros pasos con FlexBox: La caja flexible con CSS3

Dando los primeros pasos con FlexBox: La caja flexible con CSS3

Con la propiedad FlexBox podemos construir cajas flexibles, fluidas y adaptables con distintos tamaños y que sean adaptables facilmente a la resolución del dispositivo.

Andrés Cruz 22-09-2014

Seleccionar rangos de elementos con CSS

Seleccionar rangos de elementos con CSS

A veces puede hacerse necesario seleccionar un rango de datos mostrados y es de casi obligatorio demarcar esta región seleccionada lo cual puede hacerse con CSS.

Andrés Cruz 27-07-2015