PorgressbarWars para mostrar una barra de progreso estilo Star Wars

DESCARGA : ProgressBarWars

PorgressbarWars para mostrar una barra de progreso estilo Star Wars, sin duda la fiebre star wars esta cubriendo el globo terrestre y no faltaba más encontrarlo en un simple progressBar realizando con css3 y JQuery.

El objetivo de este progressBar es mostrar en los diferentes colores la barra de progresso para cargar algo, ya sea para cargar fotos, videos, un sitio completo, entre otros componentes.

Para utilizar este progressBar hay que crear una referencia a los documentos css y js utilizando también jQuery, posterior a eso tienes que crear un id para referencia y crear el progressBar mismo que se hace un corto fragmento de código, vamos a ver la implementación:

Ejemplo: oscaruhp.github.io/progressBarWars/

1.- Crea las referencias a los archivos, en este caso se usa también bootstrap.

<!-- Bootstrap and JQuery -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"> </script>
        
    <!-- Plugin -->
    <link rel="stylesheet" href="ProgressBarWars.css">
    <script src="ProgressBarWars.js"></script>

2.- Crea el elemento donde quieres que apareza el progressBar




<div id="example1"></div>



3.- Crea el script creando tambien la referencia sobre el div por ejemplo en el fragmente siguiente (example1) con las opciones que gustes como se muestra en el siguiente fragmento de código.

 $("#example1").ProgressBarWars({porcentaje:80,estilo:"vader",tiempo:5980});

Con este ultimo paso solo queda configurar tu plugin, utilizando algunas de las siguientes opciones:

 { 
        porcentaje:"100", /* valor de la barra (0 a 100)% */
        tiempo:1000, /* velocidad de transición */
        color:"#6D4C41", /*  (estilo - yoda, vader,etc..) */
        estilo:"yoda", /* valores (yoda, vader,obi,windu) */
	tamanio:"30%",   /* De 0 a 100 */
	alto:"10px"      /* Alto en ( px or % ) */
                    
}

You may also like...