シンプルなスキルバーを簡単に実装できるjQueryプラグイン「jQuery & CSS Skills Bar」

2017/02/13

こんにちは。
今回はシンプルなスキルバーを簡単に実装できるjQueryプラグイン「jQuery & CSS Skills Bar」です。

シンプルなスキルバーを簡単に実装できるjQueryプラグインを紹介します。

シンプルなスキルバーを簡単に実装できるjQueryプラグイン「jQuery & CSS Skills Bar」

jQuery & CSS Skills Bar

jquery-css-skills-bar

 

jQueryプラグイン「jQuery & CSS Skills Bar」をダウンロードしてみよう!

https://github.com/umarwebdeveloper/jquery-css-skills-barにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「jQuery & CSS Skills Bar」を設置してみよう!

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

 

その下に下記のスクリプトを記述します。
skillbarというクラスを指定しますよ。

 

html部分を記述します。
先ほど指定したクラス名を付けますよ。

 

CSSはこんな感じです。

 

何となくJavaScriptを書いていた人が一歩先に進むための本
何となくJavaScriptを書いていた人が一歩先に進むための本

 

いかがでしたか。スキルバーを手軽に実装できるのでいいですね。
以上でシンプルなスキルバーを簡単に実装できるjQueryプラグイン「jQuery & CSS Skills Bar」でした。

topへ戻る