Cómo crear barras de progreso con HTML5
29-8-2013 Diseño Web Usabilidad y UXEl lenguaje HTML5 incluye un elemento nuevo llamado <progress> que nos permite representar el progreso o avance de una tarea. Es muy similar al elemento <meter>.
Podemos incluirlo en el código de nuestra Web así:
Aparte de los atributos generales, la barra de progreso puede tener los siguientes atributos:
max – Indica la cantidad máxima de la barra. Su valor por defecto es 1.0.
value – Indica la cantidad de progreso actual. Debe ser mayor o igual a 0.0 y menor o igual a 1.0 (por defecto) o el valor máximo que hayamos indicado nosotros.
Ejemplo:
El siguiente código generaría la barra de progreso de abajo:
APLICANDO ESTILOS
Podemos aplicar estilos via CSS utilizando el selector progress[value]. En el siguiente código indicamos que la barra tenga una anchura de 250 pixels y una altura de 20 pixels:
width: 250px;
height: 20px;
}
Sin embargo, cada grupo de navegadores cuenta con unas reglas CSS específicas, por lo que tenemos que indicarlas en nuestro CSS. Una regla de estilos a prueba de errores de compatibilidad entre navegadores sería así:
/* Eliminamos la apariencia por defecto */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Quitamos el borde que aparece en Firefox */
border: none;
/* Aplicamos las dimensiones */
width: 250px;
height: 20px;
/* Aplicamos color a la barra */
color: blue;
}
/* Compatibilidad de color en Firefox y Chrome */
progress::-moz-progress-bar { background: #0063a6; }
progress::-webkit-progress-value { background: #0063a6; }
código CSS diseño Front End HTML5
