Cómo hacer una barra de progreso usando jQuery

¿Cómo hacer una barra de progreso usando jQuery?

En este artículo vamos a aprender a cómo hacer una barra de progreso usando jQuery y CSS3. Ahora, vamos a hacer un diseño previo para poder ilustrar el tema de este artículo. Para lograr el objetivo, necesitamos crear los siguientes tres archivos:

  1. El primer archivo contiene el html que llamaremos progreso.html.
  2. Luego, el segundo archivo contiene el estilo CSS que lo llamaremos ui.css.
  3. El último archivo contiene la animación jQuery adicional que se llamará progreso.js.

Nota: Para crear los archivos, lo que debemos hacer es crear un directorio en el servidor web o en el disco duro de tu computador y colocar los archivos en ese directorio.

Comencemos con el código

En esta fase, necesitamos crear el archivo progreso.html y copiar el siguiente código en él.

1. progreso.html

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title>Barra de progreso CSS</title>
 <link rel="stylesheet" href="ui.css">
</head>

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

 <div class="content" id="main_content" style="display: none;">
 <p>La barra de progreso ha cargado!</p>
 </div><!-- #main_content -->
 </div><!-- #container -->

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="progreso.js" type="text/javascript" charset="utf-8"></script>

</body>

</html>

Alguno de los puntos importantes de este código están en:

  • Línea 1: Declara el doctype HTML5.
  • Línea (12 – 16): Estas líneas contienen la estructura para la barra de progreso.

El siguiente paso es crear el estilo CSS3. En este paso, crea el archivo ui.css y copia el código escrito a continuación.

2. ui.css

body {
 background:#eee;
 padding: 30px;
 font-size: 62.5%;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 position: relative;
 margin: 0;
}

#container {
 margin: 0 auto;
 width: 460px;
 padding: 2em;
 background: #DCDDDF;
}

.ui-progress-bar {
 margin-top: 3em;
 margin-bottom: 3em;
}

.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;
}

@-webkit-keyframes animate-stripes {
 from {
 background-position: 0 0;
 }

 to {
 background-position: 44px 0;
 }

}

.ui-progress-bar {
 position: relative;
 height: 35px;
 padding-right: 2px;
 background-color: #abb2bc;
 border-radius: 35px;
 -moz-border-radius: 35px;
 -webkit-border-radius: 35px;
 background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
 background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
 -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
 -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
 box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}

.ui-progress {
 position: relative;
 display: block;
 overflow: hidden;
 height: 33px;
 -moz-border-radius: 35px;
 -webkit-border-radius: 35px;
 border-radius: 35px;
 -webkit-background-size: 44px 44px;
 background-color: #74d04c;
 background: -webkit-gradient(linear, 0 0, 44 44, color-stop(0.00, rgba(255,255,255,0.17)), color-stop(0.25, rgba(255,255,255,0.17)), color-stop(0.26, rgba(255,255,255,0)), color-stop(0.50, rgba(255,255,255,0)), color-stop(0.51, rgba(255,255,255,0.17)), color-stop(0.75, rgba(255,255,255,0.17)), color-stop(0.76, rgba(255,255,255,0)), color-stop(1.00, rgba(255,255,255,0)) ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
 background: -moz-repeating-linear-gradient(top left -30deg, rgba(255,255,255,0.17), rgba(255,255,255,0.17) 15px, rgba(255,255,255,0) 15px, rgba(255,255,255,0) 30px ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
 -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
 -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
 box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
 border: 1px solid #4c8932;
 -webkit-animation: animate-stripes 2s linear infinite;
}

Explicación

En esto, tenemos dos class CSS. La explicación de ambos class es la siguiente:

  • La primera clase se denomina .ui-progress-bar, que es el contenedor.
  • El segundo es nombrado como .ui-progress que es la barra de progreso verde.

Adicionalmente vamos a comentar las siguientes lineas de estos dos class:

  • Líneas (1-9): Estas líneas nos permiten mover el elemento de un punto a otro y también definir la animación específica de webkit.
  • Línea 16: Esta línea define la propiedad CSS3 de radio de borde y se utiliza para obtener un radio y esquinas redondeadas.
  • Línea 17: Esta es la propiedad border-radius aplicada específicamente para Mozilla.
  • Línea 18: Esta es la propiedad border-radius aplicada específicamente para Webkit.
  • Línea 19: Esta línea nos permiten añadir un gradiente a un elemento y se conoce como propiedad de degradado de webkit. Esto se utiliza específicamente para webkit y no es adecuado para otros navegadores.
  • Línea 20: Esta línea nos permite añadir un gradiente a un elemento mientras trabajamos en Mozilla.
  • Líneas (21-23): Estas líneas nos permiten añadir una sombra a un elemento.
  • Línea 56: Esta línea se utiliza para activar la animación del webkit como se menciona en la línea 1.

Ahora, para probar la barra de progreso deberemos realizar lo siguiente:

  • Guarda el archivo ui.css.
  • Abre el archivo progreso.html en el navegador web.

El último paso es animar la barra de progreso con jQuery, el cual es el elemento principal detrás de la barra de progreso. Para hacer esto, sólo necesitamos agregar un código de dos líneas en el archivo progreso.html. El código debe agregarse justo encima de la etiqueta de cierre </ body>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="progreso.js" type="text/javascript" charset="utf-8"></script>

El código anterior cargará el archivo jQuery así como el archivo progreso.js. Este archivo contiene el código para animar la barra de progreso.

3. progreso.js

(function( $ ){
 $.fn.animateProgress = function(progress, callback) {
 return this.each(function() {
 $(this).animate({
 width: progress+'%'
 }, {
 duration: 2000,

 easing: 'swing',

 step: function( progress ){
 var labelEl = $('.ui-label', this),
 valueEl = $('.value', labelEl);

 if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
 labelEl.hide();
 }else{
 if (labelEl.is(":hidden")) {
 labelEl.fadeIn();
 };
 }

 if (Math.ceil(progress) == 100) {
 labelEl.text('Done');
 setTimeout(function() {
 labelEl.fadeOut();
 }, 1000);
 }else{
 valueEl.text(Math.ceil(progress) + '%');
 }
 },
 complete: function(scope, i, elem) {
 if (callback) {
 callback.call(this, i, elem );
 };
 }
 });
 });
 };
})( jQuery );

$(function() {
 $('#progress_bar .ui-progress .ui-label').hide();
 $('#progress_bar .ui-progress').css('width', '7%');

$('#progress_bar .ui-progress').animateProgress(43, function() {
 $(this).animateProgress(79, function() {
 setTimeout(function() {
 $('#progress_bar .ui-progress').animateProgress(100, function() {
 $('#main_content').slideDown();
 });
 }, 2000);
 });
 });

});

El paso final es guardar y ver el archivo progreso.html para obtener una barra de progreso animada.

Cómo hacer una barra de progreso usando jQuery

Conclusión

En este artículo, hemos aprendido dos cosas importantes que son necesarias para crear una barra de progreso animado que funcione en diferentes navegadores. Estas cosas importantes incluyen la creación de la estructura del HTML, hacer que la barra de progreso entre en acción y finalmente animar la barra de progreso utilizando jQuery.

Enlaces relacionados

jQuery – Comprueba si un elemento tiene un Class específico

Aprender a programar gratis

Cómo crear un encabezado fijo animado

Deja un comentario

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