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.
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%
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!
Comparte en las redes sociales
¿Buscas trabajo de programador?
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
Hola que tal,
Para este tipo de ayudas que requieren más de una hora de trabajo lo que podemos hacer es que nos envíes un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos
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..
Hola buenos días,
Si nos envías un email a blog@jose-aguilar.com con estos detalles le podemos indicar el procedimiento para realizar estas modificaciones.
Saludos