jQuery

【jQuery】Star Warsプログレスバープラグイン。ProgressBarWars.js

December 27, 2015

ProgressBarWars.jsはjQueryのアニメーションスターウォーズプログレスバープラグイン。

jQuery

<!-- 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>

HTML

<div id="example1"></div>
   <div id="example2"></div>
   <div id="example3"></div>
   <div id="example4"></div>

呼び出し

$("#example1").ProgressBarWars({porcentaje:80,estilo:"vader",tiempo:5980});
$("#example2").ProgressBarWars({porcentaje:40,estilo:"yoda",tiempo:1000});
$("#example3").ProgressBarWars({porcentaje:90,estilo:"obi",tiempo:1800});
$("#example4").ProgressBarWars({porcentaje:5,estilo:"windu",tiempo:1900});

オプション

{ 
            porcentaje:"100", /* value of bar (0 to 100)% */
            tiempo:1000, /* is velocity in milliseconds */
            color:"#6D4C41", /* disabled (estilo - yoda, vader,etc..) */
            estilo:"yoda", /* values (yoda, vader,obi,windu) */
			tamanio:"30%",   /* with (0 to 100) */
			alto:"10px"      /* height ( px or % ) */
                    
        }