jQuery

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

November 22, 2018
An skill bar

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

Installation

headセクションにCSSを追加

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

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

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

Usage

マークアップを初期化

<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"
    });
});

custom Style or color

カスタムスタイル

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

MIT