H 5 progressタグ

進捗バータグ
例:
 
ツールバーの
maxプログレスバー最大値
value進捗バー現在値
position読み取り専用属性、value/maxという値を算出すると小数点が多く、整数を取る必要があります
 
スタイル:プログレスバースタイル、FFEDGE CHROMEはすべて異なっていて、災難です
ボーダーborder:{1 px solid gold;}//これは分かりやすく、他の要素の枠線と同じです.
背景色:background-color:{white;}//汎用設定
以下は異なるブラウザ設定です

　　　　color: gold; //    (       ) IE    

　　　　progress::-moz-progress-bar { background: gold; }//    (       )    

　　　　progress::-webkit-progress-bar { background: white; }//    (        )    

　　　　progress::-webkit-progress-value  { background: gold; }//    (       )   

簡単な例です
1.スタイル
.processbar{height:30 px;//進捗バー高さwidth:30%;//進捗バー幅border:4 px solid gold;//進捗バーボーダーbackground-color:red;//進捗バー全体背景色color:black;//完了済み進捗IE高バージョン(10,11)}
progress::-webkit-progress-bar{background-color:red;//進捗バー全体の背景グーグル}
progress::-webkit-progress-value{backgrund-color:black;//完了した進捗グーグル}
progress::-moz-progress-bar{background-color:black;//完了した進捗火狐}
2.タグ
//進捗バー

//をリセット
3.スクリプト
　
stepprocessbar();//プログレスバーの増加function stepprocessbar(){var pb=document.getElementById("processbar");pb.value=pb.value+1;
//進捗表示label var processlabel=document.getElementById("processvalue"); 　　processlabel.innerText= pb.value + '%'; 　　processlabel.textContent = pb.value + '%';;//FFはinnerTextをサポートしていません
if(pb.value<100){settimeout(function(){stepprocessbar()},50)}//進捗バーfunction resetprocess(){var pb=document.getElementById("processbar");if(pb.value!=100)return;document.getElementById("processbar").value=0;stepprocessbar();