Progress bar animation
Las barras de progreso son elementos de las interfaces gráficas que permiten mostrar de forma gráfica el estado de avance de una tarea o proceso. Generalmente el gráfico está acompañado de información en forma de texto para medir con exactitud el avance. Por ejemplo, con estas barras puede verse el progreso en la descarga o transferencia de un archivo, el porcentaje de renderizado de un modelo 3D, el avance en la carga de un juego, etc.
En este artículo vamos a ver como crear una barra de progreso utilizando un plugin jQuery como la que mostramos en la siguiente imagen:
En la cabecera de nuestra página tendremos que añadir la librería jQuery, el plugin jQuery progress y la llamada al plugin, por ejemplo de la siguiente forma:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/progress.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
// Hide the label at start
$('#progress_bar .ui-progress .ui-label').hide();
// Set initial value
$('#progress_bar .ui-progress').css('width', '7%');
// Simulate some progress
$('#progress_bar .ui-progress').animateProgress(43, function() {
$(this).animateProgress(79, function() {
setTimeout(function() {
$('#progress_bar .ui-progress').animateProgress(100, function() {
$('.content_success').slideDown();
});
}, 3000);
});
});
});
</script>
En este caso, estamos indicando que queremos una barra de progreso con animación de duración de 3 segundos. Al finalizar este tiempo se acaba la animación y mostramos con efecto slideDown un contenedor escondido.
Necesitaremos añadir también en nuestra hoja de estilos:
.ui-progress-bar {
position: relative;
height: 35px;
padding-right: 2px;
background-color: #DADADA;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.ui-progress {
position: relative;
display: block;
overflow: hidden;
height: 33px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-background-size: 44px 44px;
background-color: #74d04c;
border: 1px solid #4c8932;
-webkit-animation: animate-stripes 2s linear infinite;
}
.ui-progress span.ui-label {
font-size: 1.2em;
position: absolute;
right: 0;
line-height: 33px;
padding-right: 12px;
color: rgba(0,0,0,0.6);
text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
white-space: nowrap;
}
Y ahora tan solo queda añadir los tags HTML dentro del <body>:
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Hola que tal, como siempre, gracias por todos los aportes, solo tengo una duda en este caso, cómo aplico la progress bar a un archivo php que tengo que sube un archivo a una base de datos??
Muchas gracias!!
HOla buenas tardes,
Tienes que programar el evento click del botón del formulario y que se ejecute via jQuery para que puedas meter dentro todo el código del Progress bar animation.
Saludos