「CSS」progress要素でタスクの進捗状況を表示する

2022年6月21日

環境
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> 要素は、タスクの進捗状況を表示します

CSS

Posted by arkgame