「CSS」progress要素でタスクの進捗状況を表示する
環境
Google Chrome 102.0.5005.115
属性
<progress id="file" max="100″ value="値">xx</progress>
htmlの<progress> 要素は、タスクの進捗状況を表示します。
max属性は、progress 要素で示すタスクで必要とする総作業量を設定します。
value属性は、タスクの進捗状況を設定します。
使用例
<!DOCTYPE html> <html> <head> <style> label { padding-right: 10px; font-size: 1rem; } </style> </head> <body> <label for="file">ファイルのタスクの進捗状況を表示:</label> <progress id="file" max="100" value="80">80% </progress> </body> </html>
結果
htmlの<progress> 要素は、タスクの進捗状況を表示します