An skill barはjQueryベースの軽量スキルプログレスバー。

headセクションにCSSを追加

<link rel="stylesheet" href="an-skill-bar.min.css">

jqueryライブラリの後にjavascriptファイルを追加

<script src="scripts/an-skill-bar.js"></script>

マークアップを初期化

<div class="skillbar">
      <span class="title"></i> less</span>
      <span class="percent">40%</span>
      <div class="filled" data-width="90%"></div>
</div>

クラスを使用

<div class="skillbar html">
      <span class="title"></i> less</span>
      <span class="percent">40%</span>
      <div class="filled" data-width="90%"></div>
</div>

プラグインを初期化

$(document).ready(function () {
    $(".skillbar").skillbar();
});

$(document).ready(function () {
    $(".skillbar").skillbar({
        speed: 1000,
        bg : "#008080"
    });
});

カスタムスタイル

.skillbar.myownclass .title{
/* Your style goes here */
}
.skillbar.myownclass .percent{
/* Your style goes here */
}
.skillbar.myownclass .filled{
/* Your style goes here */
}

MIT

• Tag
• jQuery