DesarrolloLibre

Desarrollo Web, Android, juegos 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

Loader pino con CSS

Loader pino con CSS

Loader variados con CSS

Loader variados con CSS

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Algunos artículos que te pueden interesar

Bordes redondeados con CSS

Bordes redondeados con CSS

En este artículo le enseñaremos como crear bordes redondeados con solo CSS, es decir, sin emplear imágenes en el proceso empleando la propiedad border-radius.

Andrés Cruz 21-11-2013

¿Cómo crear un efecto radar con las animaciones en CSS?

¿Cómo crear un efecto radar con las animaciones en CSS?

En esta entrada veremos cómo crear un simple efecto radar con CSS y las animaciones usando un keyframe para generar las ondas sobre múltiples etiquetas divs.

Andrés Cruz 25-02-2016

Probando las transformaciones 3d con anime.js

Probando las transformaciones 3d con anime.js

Andrés Cruz 01-09-2016