[57] プログレスバー(進捗状況)を出そう progress要素

最終更新日:2018年03月30日  (初回投稿日:2013年10月29日)

<progress>要素作業の進捗状況を示す要素で「プログレスバー」を出します。
<output><meter>と同じく 表示をする 役目。これもHTML5 からの新要素です。

<meter>と違って静的な状況を示すのではなく、ページやファイルのロード状況とか、ファイルのアップロードの状況などの、動的な進捗状況を示すのに使います。

こんなかんじ。

*実際のページのロードに連動してません。動きを見せるために 1〜100までカウントしてるだけ。

Loading : Loading... : 0
使用する要素 <progress> 〜 </progress>
<progress>の属性 value:完了した量を表す。デフォルトは0.0〜1.0
max:トータルの量を指定
form:親の<form>のID名を呼び出して関連づける
グローバル属性

value属性と max属性の約束事

value属性と max属性、どちらも0以上の数値を使います。マイナスはNG進捗状況だからね。
value属性のデフォルトは0.0から1.0。小数もOKってことね。
max属性があれば、value属性の値も max属性の値まで。逆にmax属性が無ければ、maxの値は1.0。
max属性は、0より大きい値でなければダメ(0じゃダメ)。

●サンプル1
静的なサンプルですが、value属性と max属性の指定によるプレビューです。

max値は全部 100にしています。
value値(これは実際には JavaScript によって変動するのですが)は、
上から、0、50、100。4番目は value属性が無い(または取得できない)状態のサンプルです。




<label ><progress value="0" max="100"><span>0</span>%</progress> (0%)</label >
<label ><progress value="50" max="100"><span>50</span>%</progress> (50%)</label >
<label ><progress value="100" max="100"><span>100</span>%</progress> (100%)</label >
<label ><progress max="100"><span>0</span>%</progress>(未確定)</label >

<progress>〜</progress>の間に、未対応ブラウザでも進捗を把握できるように、現在値と最大値をテキストで表示する事が推奨されてます。
<progress>に対応しているブラウザでは、この内容は表示されません。

で、具体的な使い方は …プログラマーのかたにお任せで〜す ヽ(´ー`)ノ

プログラマーの方なら、Javascriptで進捗の数値を取得して <progress>要素に表示させるのは簡単なんでしょうね。(未消化でゴメン!)

プログレスバーの サンプルコード が W3Cの<progress>のページ(EXAMPLE 56)にありましたので、一応ご参考までに貼っときます。

*この例では updateProgress() メソッドを、同じページの「別コード」から呼び出せば、タスクの進捗に従って プログレスバーを更新する、と説明されています。

<section>
  <h2>Task Progress</h2>
  <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>
  <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
  </script>
</section>

おまけサンプル

ということであんまり役に立たないけど、冒頭の <progress>を javaScriptで動かしてみたサンプルのソースを一応書いとくね。
value値を 1ずつ足しただけ。<output>要素も使ってみましたよ。

Loading : Loading... : 0
 
Loading : <progress id="prog" max="100" value="0">Loading...</progress>
 : <output id="outp">0</output>%<br>
<input type="button" value="リロードして確認" onClick="location.reload(); return false;">

<script>
  var pbar = document.getElementById('prog');
  var ptxt = document.getElementById('outp');
  var pup = setInterval("upPrgrss()",100);
  function upPrgrss(){
    if(pbar.value<=pbar.max){
    pbar.value++;       /*「++」で 1 ずつ足してます*/
    ptxt.value = pbar.value;
    }else{
    clearInterval(pup);
    }
}
</script>

次回予告

次回は <keygen>要素です。これは、シリアルナンバーとかCDキーとかを生成する役目だそうで、HTML5からの新要素です。
(注:この <keygen>要素は HTML5.2 で削除されました。2018年3月記)

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.