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

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Animar barra de progreso en HTML5 y CSS3

Publica tu comentario

o puedes...