skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

ローディングの進捗度合いを簡単に円状表示できる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>

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

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

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:テキスト表示を印象的にする動きを付与!jQueryプラグイン「jQuery TextFX」

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more