Animar barra de progreso en HTML5 y CSS3

En este tutorial veremos como hacer una barra de progreso o de precarga en HTML5 y CSS3.
En ocasiones necesitamos barras de progreso para diferentes secciones de nuestros desarrollos Web. Ya sea para precargar una imagen, una galería o incluso un video, y ésta es la oportunidad para dar un toque mucho más elegante.

Primero, maquetamos el HTML5:

Código :

<!DOCTYPE html>
<html lang=”es”>
   <head>
      <title>Barra de progreso – Demo – John W. Martinez</title>
   </head>
   <body>
      <script src=”http://code.jquery.com/jquery-latest.min.js”></script>
      <div id=”contenedor”>
         <div>
            <span style=”width: 1%” id=”progresito”> </span>
         </div>
      </div>
   </body>
</html>

El código no tiene nada de novedoso si ya has trabajado con HTML5. Sin embargo, la etiqueta que se encarga del progreso tiene algunos elementos importantes que es necesario destacar:

progress-bar (class): Es la etiqueta con la que vamos a definir los parametros principales de nuestro precargador.
blue (class): para este ejemplo, esta etiqueta se encarga de agregar el color azul en el diseño de la barra.
stripes (class): es la animación desde CSS3 que le vamos a dar a nuestra barra.
span (etiqueta): esta etiqueta nos ayuda a saber que tanto estará llena nuestra barra (siendo 0% vacia y 100% totalmente llena).

Ahora, agregamos los códigos CSS3 para darle un estilo a nuestra barra de progreso:

Código :

body{
   background-color:#333;
}

#contenedor{
   margin:0 auto;
   text-align:center;
   width:360px; 
}

Con este código, vamos a centrar nuestra barra de progreso y le vamos a asignar un color de fondo gris a nuestro website de ejemplo.

Código :

.progress-bar {
   background-color: #1a1a1a;
   height: 25px;
   padding: 5px;
   width: 350px;
   margin: 50px 0;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
   -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
   box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.progress-bar span {
   display: inline-block;
   height: 25px;
   width: 200px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
   box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
   -webkit-transition: width .4s ease-in-out;
   -moz-transition: width .4s ease-in-out;
   -ms-transition: width .4s ease-in-out;
   -o-transition: width .4s ease-in-out;
   transition: width .4s ease-in-out;
}

Con el código anterior monstamos la barra básica, sin color de fondo y solo con esquinas redondeadas.

Código :

.blue span {
   background-color: #34c2e3;
}

.orange span {
   background-color: #fecf23;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
   background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
   background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
   background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
   background-image: -o-linear-gradient(top, #fecf23, #fd9215);
   background-image: linear-gradient(top, #fecf23, #fd9215);
}

.green span {
   background-color: #a5df41;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
   background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
   background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
   background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
   background-image: -o-linear-gradient(top, #a5df41, #4ca916);
   background-image: linear-gradient(top, #a5df41, #4ca916);
}

Y luego, viene el código CSS3 de la animación “stripes”.

Código :

.stripes span {
   -webkit-background-size: 30px 30px;
   -moz-background-size: 30px 30px;
   background-size: 30px 30px;
   background-image: -webkit-gradient(linear, left top, right bottom,
   color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
   color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
   color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
   to(transparent));
   background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
   transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
   transparent 75%, transparent);
   background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
   transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
   transparent 75%, transparent);
   background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
   transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
   transparent 75%, transparent);
   background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
   transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
   transparent 75%, transparent);
   background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
   transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
   transparent 75%, transparent);
   -webkit-animation: animate-stripes 3s linear infinite;
   -moz-animation: animate-stripes 3s linear infinite;
}

@-webkit-keyframes animate-stripes {
   0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
   0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

Ver el demo haciendo clic aqui

Por weezero el 22 de Diciembre de 2011

Muy bueno el tutorial! pero me parece que en el código html falta agregar el atributo "class" en el div
Por johnwmartinez el 22 de Diciembre de 2011
weezero-blog :
Muy bueno el tutorial! pero me parece que en el código html falta agregar el atributo "class" en el div

Tienes toda la razón. El código de la capa es:

Código :
```
<div id="contenedor">
   <div class="progress-bar blue stripes">
       <span style="width: 1%" id="progresito"> </span>
   </div>
</div>
```
Por Mariux el 22 de Diciembre de 2011

están geniales estos tutos!
Por teskostudio el 22 de Diciembre de 2011

Gracias por el aporte!.

Una pregunta: Qué es lo que estás cargando?, de donde viene el porcentaje que usas en la barra y que hace que esta vaya progresando?.
Por Kinduff el 22 de Diciembre de 2011

@teskostudio: Esa barra de progreso no carga nada, pero se puede integrar con o la carga de alguna imagen o contenido o de toda la página. Quedará bonita la animación.
Por Alivan el 22 de Diciembre de 2011

Estuve tratando de hacer algo similar pero no lo conseguía. Muchas gracias .
Por DiegoVelevu el 23 de Diciembre de 2011

No es demasiado código?
Cómo le agrego 3D?
Por johnwmartinez el 23 de Diciembre de 2011

Mariux :
están geniales estos tutos!

Muchas gracias, viniendo de usted, con su historial en CL, para mi es un honor.

teskostudio :
Gracias por el aporte!.

Una pregunta: Qué es lo que estás cargando?, de donde viene el porcentaje que usas en la barra y que hace que esta vaya progresando?.

Asi como lo dice el señor @kinduff, tu puedes ligar cualquier cosa que estés cargando a esta barra, ya sea un video, un audio, una fotografía, o toda una página. No es sino explorar un poco jQuery y listo.

Alivan :
Estuve tratando de hacer algo similar pero no lo conseguía. Muchas gracias .

Gracias a ti por leer y hacer feedback, te agradecería ideas para compartir en HTML5 y CSS3.

DiegoVelevu :
No es demasiado código?
Cómo le agrego 3D?

Creo que el código es más que suficiente, esta bien ordenado; tal vez podría existir una manera de hacerlo más corto, pero tampoco se trata de dar todo "molidito" sino que podamos aprender y retro-alimentarnos. Respecto al tema del 3D, la verdad no estoy tan capacitado hasta allá, sin embargo, te noto muy entrador y muy interesado en la tecnología, por qué no lo haces tú y lo compartes? Sería una oportunidad de "feedback" excelente
PD: De nada
Por teskostudio el 23 de Diciembre de 2011

@Kinduff/@johnwmatinez

El tema está que nunca he sabido de que forma Javascript gestiona la carga de archivos. Sé que en AS se pueden acceder a ellos mediante el objeto contentLoaderInfo del la clase Loader o directamente si usas la clase URLLoader del palo e.bytesTotal / e.bytesLoaded * 100 escuchando el evento PROGRESS.

Podrías explicar como, por ejemplo, se podria acceder a los datos de lo que estás cargando ya sea usando JQuery o simplemente JS puro y duro?. Por más que le doy vueltas nunca he conseguido "emular" la forma en la que suelo trabajar en AS3.

Gracias!.
Por Alejandro el 23 de Diciembre de 2011

Como puedo hacer para que ciando termine de reproducirse el video, la pagina se redireccione a otra
Por el 09 de Enero de 2012

Buen tutorial, solo tengo una duda, en el .progress-bar no debería ir un "text-align: left;" cuando lo intente hacer la progress-bar se quedo en el centro y crecia hacia los lados.

Saludos
Por adrian el 10 de Enero de 2012

alguien puede poner como redirgir a una pagina al llegar a 100% gracias
Por pelao el 24 de Abril de 2012

excelente esta barra de progreso lo andaba buscando

Animar barra de progreso en HTML5 y CSS3

Publica tu comentario

o puedes...