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

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