スターウォーズのライトセーバー風のプログレスバーを実装できるjQueryプラグイン「ProgressBarWars」!

2016/02/27

こんにちは。
今回はスターウォーズのライトセーバー風のプログレスバーを実装できるjQueryプラグイン「ProgressBarWars」!です。

スターウォーズのライトセーバー風の面白いプログレスバーにする事ができるjQueryプラグインを紹介します。

スターウォーズのライトセーバー風のプログレスバーを実装できるjQueryプラグイン「ProgressBarWars」!

ProgressBarWars

progressbarwars

 

「ProgressBarWars」をダウンロードしてみよう!

http://oscaruhp.github.io/progressBarWars/にアクセスして左にある「Download」のボタンをクリックしてダウンロードします。

 

「ProgressBarWars」を設置してみよう!

BootstrapとProgressBarWars.cssをhead内に読み込みます。

 

jQuery本体とProgressBarWars.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。

 

オプションです。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。スターウォーズ関連のサイトには是非、取り入れたいですね。
以上でスターウォーズのライトセーバー風のプログレスバーを実装できるjQueryプラグイン「ProgressBarWars」!でした。

topへ戻る