Barra de progreso con CSS3 animado con un poco de 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:
visualizacion-navegadores

Vamos a comenzar!!.

El codigo HTML

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

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

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.

Y eso es todo… Claro, por este ejercicio, nos vemos en otro tutosytips.

———-

———-

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

3 Respuestas

  1. Thank you for sharing with us, I believe this website truly
    stands out : D.

  2. Liliana dice:

    muy buena e interactiva