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

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

使用方法 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>

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

なお、ローディングにおいては、新しい手法としてスケルトンスクリーンもありますので、あわせてご検討ください。
ページローディング時にユーザーの興味を維持するためのスケルトンスクリーン

sponsors

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

記事作成:
記事URL:

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