進捗の割合（％）をプログレスバーで表示「ProgressBar」

当ページのリンクには広告が含まれています。

jQuery Plugin » アニメーション » 進捗の割合（％）をプログレスバーで表示「ProgressBar」

進捗の割合（％）をプログレスバーで表示するプラグイン「ProgressBar」を紹介します。

jQueryプラグイン「ProgressBar」

このプラグインを使えば、進捗の割合（％）を指定するだけで簡単にプログレスバーを実装することができます。

また、オプションでは「進捗率」「プログレスバーの分割数」「バーの幅」「バーの高さ」……などを指定することができます。

プラグインをページロード時に設定するとびよーんとアニメーションで進捗率のバーが表示されます。

それではデモページのプログレスバーをご覧ください。

「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>

jQueryプラグイン「ProgressBar」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）