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