Emplea un barra de progreso con CSS3 y Javascript

En este tutorial veremos como podemos hacer una barra de progreso con CSS animada con un poco de Javascript, nos puede ser útil para indicar el estado de una tarea, el tiempo de carga de algo u tiempo que se espera para mostrar algo. No nos tomara mucho trabajo, ya que será un ejercicio muy fácil y practico.

Esto es lo que lograremos:

Para un buen funcionamiento y visualización utiliza los siguientes navegadores y versiones:

Vamos a comenzar!!.

El Codigo HTML

1 2 3 4 5 6 7 8 9 10

<div id="precargador">   <p id="progressnum"></p>   <div id="progressbar">      <div id="indicador"></div>   </div>   <input type="button" name="Submit" value="Cargar"       onclick="itv = setInterval(prog, 100)" />   <input type="button" name="Submit" value="Parar"       onclick="clearInterval(itv)" /> </div>

Ok, este es el código HTML de nuestra barra de progreso. Tenemos un < div id=” precargador”> que nos encierra todo el precargador, para poder manejarlo fácilmente, dentro un <p id=”progressnum”> que es el párrafo que mostrara el tiempo de carga por medio de texto dinámicamente, luego el <div id=”progressbar”> que es la caja de la barra de progreso padre y dentro de este div un tenemos <div id=”indicador”> que nos muestra el progreso gráficamente, luego 2 input tipo botón para iniciar y para el proceso de carga y cada uno con diferente función. Este es la parte del HTML.

Un Poco De JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<script>   var maxprogress = 300; var actualprogress = 0; var itv = 0; function prog() {   if(actualprogress >= maxprogress)   {     clearInterval(itv);            return;   }       var progressnum = document.getElementById("progressnum");   var indicador = document.getElementById("indicador");   actualprogress += 1;       indicador.style.width=actualprogress + "px";   progressnum.innerHTML = (maxprogress - actualprogress) + " MS Faltantes"; } </script>

El anterior script tiene como funcionalidad hacer que nuestro indicador de la barra de progreso se mueva en determinado tiempo “300ms o 30s”, creamos una función que lo que hacemos es indicar el tiempo de progreso por pixeles, y así mostrar el tiempo faltante en el párrafo indicado en el html “indicador” y obtenido en esta función .

EL CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

div#precargador {     border: 1px solid #0099CC;     padding: 10px;     margin: 0 auto;     width: 320px; } p#progressnum {     color: #ccc;     font-size: 15px;     height: 20px;     margin: 5px;     font-style: italic;     text-align: center; } #progressbar{     height: 24px;     padding: 4px;     background-color: #191919;     border-radius: 16px;     box-shadow: inset 0 1px 2px #333, 0 1px 0 #777;     margin: 0 0 10px;     width: 300px; } div#precargador input {     background: #eee;     border: none;     border-radius: 9px;     background: #444;     box-shadow: 0 1px 1px #222 inset, 0 1px 0 #999;     color: #777;     cursor: pointer; } div#precargador input:hover {     background: #666;     color: #333; } #indicador{     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(0, 0, 0, 0.8) inset, 0 0 2px black;     border: 1px solid rgba(0, 0, 0, 0.5);     border-radius: 15px 15px 15px 15px;     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);     color: #0099CC;     display: inline-block;     height: 24px;     margin-right: 10px;     width: 300px;     background-color: #0099CC;     background-image:       repeating-linear-gradient(       45deg,       rgba(255, 255, 255, 0.2) 0px,       rgba(255, 255, 255, 0.2) 10px,       rgba(255, 255, 255, 0) 10px,       rgba(255, 255, 255, 0) 20px),       linear-gradient(       rgba(255, 255, 255, 0.1) 50%,       rgba(255, 255, 255, 0) 60%),       none;     /*------ PARA CHROME Y SAFARI -----*/   background:     -webkit-repeating-linear-gradient(       45deg,       rgba(255,255,255,.2) 0,       rgba(255,255,255,.2) 10px,       rgba(255,255,255,0) 10px,       rgba(255,255,255,0) 20px     ),     -webkit-linear-gradient(       rgba(255,255,255,.1) 50%,       rgba(255,255,255,0) 60%     ),     #09c;     /*------ PARA FIREFOX----*/   background:     -moz-repeating-linear-gradient(       45deg,       rgba(255,255,255,.2) 0,       rgba(255,255,255,.2) 10px,       rgba(255,255,255,0) 10px,       rgba(255,255,255,0) 20px     ),     -moz-linear-gradient(       rgba(255,255,255,.1) 50%,       rgba(255,255,255,0) 60%     ),     #09c;     /*------ PARA OPERA----*/   background:     -o-repeating-linear-gradient(       45deg,       rgba(255,255,255,.2) 0,       rgba(255,255,255,.2) 10px,       rgba(255,255,255,0) 10px,       rgba(255,255,255,0) 20px     ),     -o-linear-gradient(       rgba(255,255,255,.1) 50%,       rgba(255,255,255,0) 60%     ),  #09c; }

En el CSS vamos a dar nuestro estilo y ajustar posiciones de cada objeto, el #precargador es para dar posicionamiento, el p#progressnum es el estilo del párrafo que nos muestra el tiempo faltante de la carga, #progressbar son los estilos de la caja del precargador, luego los input que son los botones, le agregamos un poco de estilo para adaptarlo al diseño le damos sombras y redondeamos los bordes, y por ultimo el #indicador que es la barra que va creciendo de acuerdo el tiempo, hay propiedades de CSS3 tales como sombra, bordes redondeados y un background compuesto por varias capas y transparencia para obtener el resultado deseado y un decline de 45°, esto lo aplicamos y comprobamos su funcionamiento en los diferentes navegadores por medio de los prefijos de cada uno de ellos.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información