ドラッグで直接メータを動かすこともできるよ。

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/jquery.percentageloader-0.1.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.percentageloader-0.1.min.js"></script>
<script>
	$(window).load(function(){
		var $topLoader = $('#PercentageLoaderDemo01').percentageLoader({
			width: 256,
			height: 256,
			controllable: true,
			progress: 0.5,
			onProgressUpdate: function(val) {
				$topLoader.setValue(Math.round(val * 100.0));
			}
		});
		var topLoaderRunning = false;

		$('#PercentageLoaderDemo02').click(function() {
			if (topLoaderRunning) {
				return;
			}
			topLoaderRunning = true;
			$topLoader.setProgress(0);
			$topLoader.setValue('0kb');
			var kb = 0;
			var totalKb = 999;
			
			var animateFunc = function() {
				kb += 17;
				$topLoader.setProgress(kb / totalKb);
				$topLoader.setValue(kb.toString() + 'kb');
				
				if (kb < totalKb) {
					setTimeout(animateFunc, 25);
				} else {
					topLoaderRunning = false;
				}
			}
			
			setTimeout(animateFunc, 25);
		
		});
	});
</script>
<div id="PercentageLoaderDemo01"></div>

<button class="blue" id="PercentageLoaderDemo02">メータを動かす</button>

<p>ドラッグで直接メータを動かすこともできるよ。</p>

PercentageLoaderについて

PercentageLoaderは、とてもきれいにロード内容をパーセント表示してくれるプラグインです。
イッツ、ビューティフォー!
プラグインで利用しているwebフォントはこちらからDL可能
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスBSD
対応ブラウザ

関連するjQueryプラグイン

  • Wookmark

    Wookmark

    不揃いな要素たちをきれいにタイル上に敷き詰めてくれる

  • lodaButton

    lodaButton

    lodaButtonは、アニメーションアイコン付きのボタンを設置できる

  • LivingFade

    LivingFade

    指定要素をランダムにフェードイン、フェードアウト

  • Toolbar

    Toolbar

    コンパクトなツールバーを設置できる

  • OKShadow

    OKShadow

    マウス位置にあわせて、ページ内の要素のshadowが連動