CircularLoader.jsは円形プログレスバーを簡単に実装することができるjQueryプラグインです。シンプルなデザインですが、オプションでプログレスバーのカラーや背景色なんかをカスタマイズすることも可能です。HTML5とJavaScriptで作られています。
CircularLoader.jsの使い方
以下のページからダウンロード、または実際のデモを確認することができます。
使い方はとても簡単です。jQueryとCircularLoader.jsを読み込んだら、プログレスバーを表示させる空のdivを以下のように設置します。
<div id="divProgress"></div>
あとはcircularloaderを呼び出してあげるだけです。progressPercentという項目に数値を記述します。
<script>
$("#divProgress").circularloader({
progressPercent: 5
});
</script>
オプションでフォントカラー、フォントサイズ、プログレスバーのカラー、背景色、幅など色んな項目をカスタマイズすることができます。
HTML5サポート済みの対応ブラウザは、Internet Explorer 9.0+、Google Chrome 4.0+、Mozilla Firefox 2.0+、Safari 3.1+になります。
シンプルな円形プログレスバーを取り入れたい方は是非チェックしてみてはいかがでしょうか？
