進捗の割合（％）をプログレスバーで表示「ProgressBar」
当ページのリンクには広告が含まれています。
スポンサーリンク
進捗の割合（％）をプログレスバーで表示するプラグイン「ProgressBar」を紹介します。
jQueryプラグイン「ProgressBar」
このプラグインを使えば、進捗の割合（％）を指定するだけで簡単にプログレスバーを実装することができます。
また、オプションでは「進捗率」「プログレスバーの分割数」「バーの幅」「バーの高さ」……などを指定することができます。
プラグインをページロード時に設定するとびよーんとアニメーションで進捗率のバーが表示されます。
スポンサーリンク
それではデモページのプログレスバーをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="ProgressBar のデモでーす。">
<title>ProgressBar - jQuery Plugin Demo</title>
<link rel=" stylesheet" type="text/css" href="css/tinytools.progressbar.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="tinytools.progressbar.min.js"></script>
</head>
<body>
<h1>ProgressBar のデモ。</h1>
<div id="demo"></div>
<footer style="margin-top:20px">
<a href="https://webkaru.net/jquery-plugin/progressbar/">「jQueryプラグインまとめ」に戻る</a>
</footer>
<script>
$(document).ready(function(){
$("#demo").progressBar({
percent: 40,
split: 8,
width: "600px",
height: "100px"
});
});
</script>
</body>
</html>
スポンサーリンク