DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
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

Botón flotante

Botón flotante

Hover over the cards

Hover over the cards

6 Loaders con CSS

6 Loaders con CSS

Algunos artículos que te pueden interesar

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

Truco para los bordes en CSS: Bordes transparentes

Truco para los bordes en CSS: Bordes transparentes

En esta entrada veremos un pequeño truco que permite que los bordes de los contenedores de nuestros elementos HTML; se vean transparentes.

Andrés Cruz 22-01-2015

¿Cómo crear un efecto de onda con Canvas y JavaScript?

¿Cómo crear un efecto de onda con Canvas y JavaScript?

En esta entrada veremos un experimento que simula una oda empleando el elemento Canvas y JavaScript.

Andrés Cruz 02-11-2015