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:

progress-bar-animation

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>:

<div id="progress_bar" class="ui-progress-bar">
<div class="ui-progress" style="width: 79%;"><span class="ui-label" style="display: none;">Procesando <b class="value">79%</b></span></div>
</div>

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 (10 votos, promedio: 4,90 de 5)
Cargando…
Comparte en las redes sociales

2 respuestas a “Progress bar animation”

  1. Daniel dice:

    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!!

    • Jose Aguilar dice:

      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

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