Progress bar colors

En un artículo anterior ya habíamos hablado de una barra de progreso animada que se ejecuta durante unos segundos empleando jQuery. En este artículo solo queremos ofrecer una maquetación interesante empleando CSS3 para estas barras ya sean dinámicas o estáticas.

Las barras dinámicas se utilizan para simular la carga de una página o descarga de un archivo, entre otras operaciones. Y las barras estáticas se podrían utilizar por ejemplo para implementar las barras de porcentaje para las respuestas de una encuesta.

progress-bar-colors

Para añadir estas barras en tu página Web tan solo tienes que añadir las siguientes clases CSS:

.progress {
    border: 1px solid #ccc;
    position: relative;
    display: block;
    height: 22px;
    padding: 0;
    min-width: 200px;
    margin:4px 0;
    background: #DEDEDE;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#e9e9e9));
    background: -moz-linear-gradient(top, #ccc, #e9e9e9);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#e9e9e9');

    -moz-box-shadow:0 1px 0 #fff;
    -webkit-box-shadow:0 1px 0 #fff;
    box-shadow:0 1px 0 #fff;

    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.progress span {
    display: block;
    height: 20px;
    margin: 0;
    padding: 0;
    text-align:center;
    width:0;
    
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.progress span b{
    color:#fff;
    line-height:20px;
    padding-left:2px;
    text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
}

.progress-blue span {
    border: 1px solid #0078a5; 
    background-color: #5C9ADE;
    background: -moz-linear-gradient(top, #00adee 10%, #0078a5 90%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #00adee), color-stop(0.9, #0078a5));
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}

Y luego dentro del <body> allí donde queramos los tags HTML:

50%

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (5 votos, promedio: 4,60 de 5)
Cargando…
Comparte en las redes sociales

4 respuestas a “Progress bar colors”

  1. nicolas dice:

    me guitaria implementar progress bar en un login solo por curiosidad y conocimiento tengo usuario y contraseña mi punto es que al darle al boton ingresar cargue la barra de progreso y despues me redireccione a la url especificada soy nuevo en esto de la programación y agradecería una manito

  2. ediberto dice:

    como se hace en relación con la base de datos, es decir cuando existe un formulario de registro de venta producto q van registrando los productos hasta llegar 100 productos registrados, el progressbar q va subiendo el porcentaje hasta llegar un 50% esto ha iniciado con un color verde, despues inicia nuevamente el registro sobre 100 hasta llegar a 200 registro y que el progresbar va aumentando pero que ya esta a un color amarillo que termina en un 90 % y por ultim para completar 500 registros despues del 200 el progresbar cambia de color rojo y q muestra el mensaje que ha sido completado. quiero un ejemplo de esta parte..

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre