ローディングの進捗度合いを簡単に円状表示できるjQueryプラグイン「CirclesProgressbar」

ローディングの状況を%で表示できるとユーザーのストレスを軽減できます。
jQueryプラグインのCirclesProgressbarを使用すると簡単に円状のプログレスバーを設置できます。

sponsors

使用方法

CirclesProgressbarからファイル一式をダウンロード。


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="/jquery.circles-progressbar.js"></script>
    <script type="text/javascript">
$(function(){
      $('.class名').circlesProgress({
        'size':'100', //円のサイズ
        'progress':'80', //進捗の割合
        'borderSize':'0', //円につける線
        'innerColor':'rgb(0,100,255)', //円の色
        'textElementClass':'text', //%につけるclass名
        'enableTextIndicator':true, //%表示をするかどうか
        'diplayPercentSign':true //%をつけるかどうか
      });
});
</script>
    
あとは上記のclass名を付与すれば完成です。
<p class="class名"></p>

サンプル


※動きを確認する場合は更新ボタンを押して下さい。
Javascriptサンプルページ一覧
skuare.net

sponsors