<progress>标签的核心属性是value和max，1. max属性定义任务总量或最大值；2. value属性表示当前已完成的量，其值必须在0到max之间；3. 若省略value或两者均未设置，进度条呈不确定状态，用于表示未知进度的进行中操作。
在HTML中创建一个进度条，最直接且语义化的方式就是使用 <progress> 标签。它专门为表示任务的完成进度而设计，无论是下载、上传文件，还是任何需要显示进度的操作，这个标签都能提供一个标准的视觉反馈。
解决方案
要实现一个基本的HTML进度条，你只需要用到 <progress> 标签，并配合 value 和 max 这两个核心属性。max 属性定义了任务的总量或最大值，而 value 属性则表示当前已经完成的量。
一个简单的例子就像这样：
立即学习“前端免费学习笔记（深入）”；
<p>文件上传进度：</p> <progress value="70" max="100">70%</progress>
这里，max="100" 说明总进度是100个单位，value="70" 则表示目前已经完成了70个单位。标签内部的文本 "70%" 是一个备用内容，当浏览器不支持 <progress> 标签时会显示出来，但现在大多数现代浏览器都支持它，所以这个文本通常是不可见的。
如果你省略 value 属性，<progress> 标签会显示一个不确定（indeterminate）的进度条，通常表现为动画效果，表示一个操作正在进行中，但具体的完成时间或进度百分比是未知的。这在等待服务器响应或进行后台处理时特别有用。
<p>正在加载数据，请稍候...</p> <progress></progress>
<progress> 标签的核心属性和它们的作用是什么？
其实，<progress> 标签的魔法主要就集中在 value 和 max 这两个属性上。它们是定义进度条状态的基石。max 属性，顾名思义，设定了整个任务的“总长度”或者说最大可能值。比如，如果你的任务是下载一个100MB的文件，那么 max 就可以设为 100。而 value 属性，就是当前任务已经完成的部分。接着上面的例子，如果已经下载了70MB，那么 value 就是 70。
这两个属性是数字，而且 value 的值必须在 0 到 max 之间。如果 value 超出了这个范围，浏览器可能会把它裁剪到 0 或 max。当你只设置了 max 而没有 value，或者根本没设置这两个属性，进度条就会进入“不确定”状态。这很像我们平时看到的那种来回滚动或者转圈的加载动画，它告诉用户“我在忙，但不知道什么时候忙完”。这种不确定状态在异步操作，比如等待API响应时，非常实用，因为它避免了给出虚假的进度信息。
从我个人的经验来看，正确使用这两个属性是让进度条有意义的关键。如果 value 和 max 的比例不对，或者更新不及时，用户体验就会大打折扣。比如，一个文件上传进度条突然从50%跳到90%，用户会觉得很奇怪，甚至怀疑是不是出了问题。
如何用 CSS 改变 HTML 进度条的外观样式？
说实话，用 CSS 美化 <progress> 标签，这事儿有点儿让人头疼。虽然它提供了一个语义化的进度表示，但它的默认样式在不同浏览器下表现差异很大，而且很多时候，我们想要的那种定制化程度，直接用标准 CSS 属性是很难达到的。这就像你买了一辆车，想换个颜色，结果发现每个品牌的油漆配方都不一样，而且有些地方根本喷不了漆。
最常见的挑战在于，不同的浏览器厂商为了实现自己的 UI 规范，会给 <progress> 标签应用一些私有的伪元素。比如：
-
WebKit/Blink (Chrome, Safari, Edge基于Chromium): 它们通常会用到
::-webkit-progress-bar来控制进度条的背景（也就是“槽”），以及::-webkit-progress-value来控制进度条的填充部分。 -
Mozilla (Firefox): Firefox 则使用
::-moz-progress-bar来控制进度条的填充部分。它没有一个直接控制背景槽的伪元素，你通常只能通过对<progress>标签本身设置background-color来影响它。
这意味着，如果你想实现一个跨浏览器一致的自定义样式，你可能需要为每个浏览器都写一套特定的 CSS 规则。这确实有点儿繁琐。
举个例子，假设你想把进度条的背景设为灰色，进度条填充设为蓝色：
progress {
/* 默认样式，可能会被伪元素覆盖 */
background-color: #f0f0f0; /* 进度条的槽背景色 */
border-radius: 5px; /* 圆角 */
height: 20px; /* 高度 */
width: 100%; /* 宽度 */
-webkit-appearance: none; /* 移除默认的系统样式 */
-moz-appearance: none; /* 移除默认的系统样式 */
appearance: none; /* 移除默认的系统样式 */
}
/* WebKit/Blink 浏览器 */
progress::-webkit-progress-bar {
background-color: #f0f0f0; /* 进度条槽的背景色 */
border-radius: 5px;
}
progress::-webkit-progress-value {
background-color: #4CAF50; /* 进度条填充色 */
border-radius: 5px;
transition: width 0.3s ease-in-out; /* 增加过渡效果 */
}
/* Mozilla Firefox 浏览器 */
progress::-moz-progress-bar {
background-color: #4CAF50; /* 进度条填充色 */
border-radius: 5px;
}注意，appearance: none; 是一个很重要的属性，它尝试移除浏览器默认的系统级样式，这样我们才能更好地控制其外观。即便如此，有时候你还是会发现某些属性（比如 border 或 box-shadow）在不同浏览器上的表现不尽如人意。
当自定义需求特别高，或者需要支持一些老旧浏览器时，我通常会考虑用 <div> 和 CSS 来完全自定义一个进度条。虽然失去了 <progress> 的语义性，但能换来完全的样式控制自由度，这在某些项目中是值得的权衡。
如何用 JavaScript 动态更新进度条的显示？
让进度条动起来，这才是它真正有用的地方。毕竟，一个静态的进度条，除了展示一下当前状态，就没啥意思了。用 JavaScript 动态更新 <progress> 标签，其实就是操作它的 value 属性。这听起来很简单，实际操作起来也确实不复杂，但背后的逻辑可能需要和你的业务流程紧密结合。
想象一下，你正在上传一个大文件。当文件的一部分上传成功后，服务器会返回一个进度信息。这时候，你就需要用 JavaScript 接收这个信息，然后更新页面上的进度条。
这里有一个模拟文件上传进度的简单例子：
<p>文件上传进度：<span id="progress-percentage">0%</span></p>
<progress id="upload-progress" value="0" max="100"></progress>
<button id="start-upload">开始模拟上传</button>
<script>
const progressBar = document.getElementById('upload-progress');
const percentageSpan = document.getElementById('progress-percentage');
const startButton = document.getElementById('start-upload');
let currentProgress = 0;
let intervalId;
function updateProgress() {
if (currentProgress < 100) {
currentProgress += Math.floor(Math.random() * 10) + 1; // 随机增加1-10%
if (currentProgress > 100) {
currentProgress = 100;
}
progressBar.value = currentProgress;
percentageSpan.textContent = `${currentProgress}%`;
} else {
clearInterval(intervalId);
startButton.disabled = false;
startButton.textContent = '上传完成';
}
}
startButton.addEventListener('click', () => {
currentProgress = 0;
progressBar.value = 0;
percentageSpan.textContent = '0%';
startButton.disabled = true;
startButton.textContent = '上传中...';
intervalId = setInterval(updateProgress, 300); // 每300毫秒更新一次
});
</script>在这个例子里，我们通过 setInterval 模拟了一个持续更新进度的过程。在真实世界中，updateProgress 函数里的 currentProgress 应该来自服务器的响应，比如文件上传API返回的进度事件，或者一个长时间运行任务的WebSockets通知。
当你处理异步操作时，比如 fetch API，它通常会提供一个 ReadableStream，你可以监听它的 body 读取事件来获取实时进度。这就要求你对 fetch 的高级用法和 Stream API 有一定的了解。这比直接设置 value 属性要复杂一些，但能提供更精确、实时的进度反馈。
一个常见的陷阱是，如果你的进度更新频率过高，可能会导致页面卡顿。所以，在实际开发中，可能需要考虑节流（throttle）或防抖（debounce）技术来优化更新性能，确保用户界面的流畅性。但对于大多数简单的进度条，直接更新 value 属性就已经足够了。
