目次
サンプル | プログレスバーのサンプル |
progress要素 |
プログレスバーのサンプル
プログレスバーはインストールの進捗状況などを表現できます。
ボタン1を押すとプログレスバーに色がついていきます。
色が全てつくと色をリセットしています。
サンプル:
上記サンプルのコードです。jQueryを使用しています。
サンプル:<progress id="progress1" max="100" value="0">未対応</progress>
<input type="button" id="button1" value="ボタン" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
let num = 0;
$('#progress1').attr("value",num);
// ボタンをクリックしたら以下の処理を実行する
$("#button1").click(function() {
// 値を10増やす
num = num + 10;
// 100以下の場合は値をvalue値にセット
if (num <= 100){
$('#progress1').attr("value",num);
}else{
// 100を超えたら0にする(リセット)
num = 0;
$('#progress1').attr("value",num);
}
});
});
</script>
1行目にprogressタグがあります。progressバーを表示します。
maxが最大値です。
valueに値をセットしていきます。
maxが100でvalueに50を入力するとprogressバーは半分進んだ状態になります。
progress要素に未対応のブラウザの場合はprogressで挟まれた部分の文字が表示されます。
13行目から17行目はボタンを押す毎に値が10ずつ増えていきます。
21,22行目はカウントしている値が100を超えたら0にリセットしています。
attrはjQueryのメソッドです。属性値を設定できます。
jQuery 属性値を取得/設定/削除/画面遷移する(attr)
progress要素
- HTML5で導入されました。
- progressタグでくくります。<progress>~</progress>。
- 属性のvalueに数値を入れるとプログレスバーにその分色がつきます。
- 属性のmaxは完了したときの値です。
- 以下はMDNのprogressのリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/progress
関連の記事