HTML5 进度条（Progress Bar）详解

进度条是用于显示任务完成进度的控件，常用于加载、上传或下载等操作。HTML5提供了原生的<progress>元素，使得创建进度条变得简单和直观。

1. 基本用法

<progress>元素的基本语法如下：

<progress value="50" max="100"></progress>

value 属性表示当前进度。
max 属性表示进度条的最大值（默认值为1）。

2. 属性说明

value: 当前进度的值，通常是一个数字，表示已完成的部分。
max: 进度条的最大值，表示任务的总量。
min: 可选属性，表示进度条的最小值，默认为0。

3. 示例代码

以下是一个简单的进度条示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>进度条示例</title>
</head>
<body><h1>任务进度</h1><progress id="progressBar" value="0" max="100"></progress><span id="progressText">0%</span><button onclick="startProgress()">开始任务</button><script>function startProgress() {let progressBar = document.getElementById("progressBar");let progressText = document.getElementById("progressText");let value = 0;const interval = setInterval(() => {value += 10; // 每次增加10%progressBar.value = value;progressText.innerText = value + "%";if (value >= 100) {clearInterval(interval);}}, 1000); // 每秒更新一次}</script>
</body>
</html>

4. 样式调整

可以使用CSS来调整进度条的样式：

progress {width: 100%;height: 20px;appearance: none; /* 去掉默认样式 */
}progress::-webkit-progress-bar {background-color: #f3f3f3; /* 背景颜色 */
}progress::-webkit-progress-value {background-color: #4caf50; /* 进度颜色 */
}