[プログレスバー.jsライブラリ] スクリプトなしでプログレスバーを表示する

説明

プログレスバー.jsライブラリでスクリプトなしでプログレスバーを表示するにはdivタグのclass属性にhtml5jp-progressと表示パラメータを指定します。表示パラメータは[]で囲んで記述します。プログレスバーの横幅はwidth、縦幅はheight、表示する値(パーセント)はtoで指定します。表示する値が小数値を含む場合にはndオプションに小数何桁まで表示するかどうかを指定します。0を指定すると小数点以下の値は表示されません。プログレスバーの背景色を指定したい場合にはbar_bgcにカラー名やカラーコードを指定します。プログレスバーをアニメーションさせながら表示させたい場合にはanimationに1〜10までの値を指定します。値が大きいほど速度が速くなります。0を指定した場合はアニメーションせずプログレスバーを表示します。

サンプルプログラム

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/progress.js"></script>
</head>
<body>
<h1>アンケート</h1>
<div id="pbar" class="html5jp-progress [width:200;height:20;to:50;animation:0;bar_bgc:#ffdf40;nd:0]"></div>
アンケートの質問は、残り半分あります。頑張ってください。
</body>
</html>
サンプルを実行
[戻る]