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

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 % ) */
}
 

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

  • LATEST
  • RELATED
  • POPULAR