星球大战jQuery水平进度条特效是一款使用彩色霓虹效果，仿造星球大战中的激光剑效果特效。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<article class="zzsc-container">
	<div class="zzsc-content">
		<h1>Example 1 </h1>  
		  <div class="progress" id="vader"></div>
		  <div class="progress" id="yoda"></div>
		  <div class="progress" id="obi"></div>
		  <div class="progress" id="windu"></div>
		  <script>
			var vd=$("#vader").ProgressBarWars({porcentaje:20,estilo:"vader"});
			var yd=$("#yoda").ProgressBarWars({porcentaje:30,estilo:"yoda"});
			var ob=$("#obi").ProgressBarWars({porcentaje:50,estilo:"obi"});
			var wd=$("#windu").ProgressBarWars({porcentaje:80,estilo:"windu"});
		  </script>
		  
		  <input type="button" value="Vader 70%" onclick="vd.mover(70);">
		  <input type="button" value="Yoda 90%" onclick="yd.mover(90);">
		  <input type="button" value="Obi 60%" onclick="ob.mover(60);">
		  <input type="button" value="windu 50%" onclick="wd.mover(50);">
		  <br/><br/>
		   <img src="img/Lasers.png"/>
		  
		  <h1>Example 2 (Time change)</h1>  
		  
		  <div class="progress" id="vaderTime"></div>
		  <div class="progress" id="yodaTime"></div>
		  <div class="progress" id="obiTime"></div>
		  <div class="progress" id="winduTime"></div>
		  <script>
			$("#vaderTime").ProgressBarWars({porcentaje:80,estilo:"vader",tiempo:5980});
			$("#yodaTime").ProgressBarWars({porcentaje:40,estilo:"yoda",tiempo:1000});
			$("#obiTime").ProgressBarWars({porcentaje:90,estilo:"obi",tiempo:1800});
			$("#winduTime").ProgressBarWars({porcentaje:5,estilo:"windu",tiempo:1900});
					
		  </script>
		  <img src="img/starwars-logo.png"/>
		   <h1>Example 3 (Size change)</h1>  
		  
		  <div class="progress" id="vaderSize"></div>
		  <div class="progress" id="yodaSize"></div>
		  <div class="progress" id="obiSize"></div>
		  <div class="progress" id="winduSize"></div>
		<script>
			$("#vaderSize").ProgressBarWars({porcentaje:80,estilo:"vader",tiempo:5980,alto:"30px"});
			$("#yodaSize").ProgressBarWars({porcentaje:40,estilo:"yoda",tiempo:1000,alto:"15px"});
			$("#obiSize").ProgressBarWars({porcentaje:90,estilo:"obi",tiempo:1800,alto:"3px"});
			$("#winduSize").ProgressBarWars({porcentaje:5,estilo:"windu",tiempo:1900,alto:"5px"});
		  </script>
		   
			
			   <h1>Example 4 (Color change)</h1>  
		  
		  <div class="progress" id="example1"></div>
		  <div class="progress" id="example2"></div>
		  <div class="progress" id="example3"></div>
		  <div class="progress" id="example4"></div>
		  <div class="progress" id="example5"></div>
		  <div class="progress" id="example6"></div>
		  <div class="progress" id="example7"></div>
		  <div class="progress" id="example8"></div>
		  <div class="progress" id="example9"></div>
		  
	  <script>
			$("#example1").ProgressBarWars({porcentaje:10,color:"#FF5722"});
			$("#example2").ProgressBarWars({porcentaje:20,color:"#FDD835"});
			$("#example3").ProgressBarWars({porcentaje:30,color:"#8E24AA"});
			$("#example4").ProgressBarWars({porcentaje:40,color:"#827717"});
		  $("#example5").ProgressBarWars({porcentaje:50,color:"#5E35B1"});
		  $("#example6").ProgressBarWars({porcentaje:60,color:"#00E5FF"});
		  $("#example7").ProgressBarWars({porcentaje:70,color:"#6D4C41"});
		  $("#example8").ProgressBarWars({porcentaje:80,color:"#3F51B5"});
		  $("#example9").ProgressBarWars({porcentaje:90,color:"#8BC34A"});
		  
		  </script>
		  <img src="img/darth.jpg"/>
	</div>
</article>

via：http://www.w2bc.com/article/89917

在线预览    源码下载