html的
HTML的progress标签本身就是用来显示进度条的。你只需要给它设定一个当前值（value）和最大值（max），浏览器就会根据这两个参数自动渲染出一个视觉化的进度条。如果只放一个标签而不给value属性，它就会显示一个不确定进度的动画，表示某个操作正在进行中，但具体完成多少还不知道。
在HTML中，要显示一个进度条，最直接的方式就是使用标签。
一个最基本的进度条大概长这样：
这会显示一个完成了50%的进度条。我个人觉得，这个标签用起来确实挺方便的，不用自己写一大堆CSS和JavaScript去模拟一个条形图。
但话说回来，默认的样式可能不是你想要的，通常会比较朴素，甚至在不同浏览器里长得都不太一样。所以，大部分时候我们还是需要用CSS去美化它。
立即学习“前端免费学习笔记（深入）”；
如何美化或自定义HTML progress标签的样式？
说实话，给progress标签做样式自定义，有时候会觉得有点麻烦，因为它在不同浏览器内核下的实现方式不太一样，需要用到一些特定的伪元素。
基本样式（针对整个progress元素）：
你可以像对待其他块级元素一样，设置它的宽度、高度、边框、背景色等等。
progress {
width: 300px; /* 设定宽度 */
height: 20px; /* 设定高度 */
border: 1px solid #ccc;
border-radius: 5px; /* 圆角 */
background-color: #f0f0f0; /* 进度条的背景色，也就是未填充部分的颜色 */
/* 移除默认外观 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}针对进度条填充部分的样式（关键）： 这里就是麻烦的地方了，需要用到不同的伪元素：
-
WebKit/Blink (Chrome, Safari, Edge等): 使用
::-webkit-progress-bar和::-webkit-progress-value。-
::-webkit-progress-bar控制整个进度条的背景（未填充部分）。 -
::-webkit-progress-value控制实际的进度填充部分。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; / 让进度变化更平滑 / }
-
-
Firefox (Gecko): 使用
::-moz-progress-bar。- Firefox 相对简单，
::-moz-progress-bar直接控制填充部分。整个progress元素的背景就是未填充部分。progress::-moz-progress-bar { background-color: #4CAF50; /* 填充部分的颜色 */ border-radius: 5px; }
- Firefox 相对简单，
一个完整的CSS示例：
progress {
width: 300px;
height: 20px;
border: none; /* 移除默认边框 */
border-radius: 10px; /* 圆角 */
background-color: #e0e0e0; /* 未填充部分的背景色 */
overflow: hidden; /* 确保内容不会溢出圆角 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* WebKit/Blink 浏览器 */
progress::-webkit-progress-bar {
background-color: #e0e0e0; /* 整个进度条的背景 */
border-radius: 10px;
}
progress::-webkit-progress-value {
background-color: #007bff; /* 进度填充颜色 */
border-radius: 10px;
transition: width 0.3s ease-in-out; /* 平滑过渡 */
}
/* Firefox 浏览器 */
progress::-moz-progress-bar {
background-color: #007bff; /* 进度填充颜色 */
border-radius: 10px;
transition: width 0.3s ease-in-out;
}这样一套下来，基本上就能搞定大部分浏览器的样式兼容性问题了。
HTML progress标签支持哪些属性，它们有什么作用？
progress标签主要支持两个核心属性，它们是控制进度条行为的关键：
-
value属性：- 它是一个浮点数，表示当前任务已经完成的量。
- 这个值必须是非负数。
- 如果
value属性存在，那么progress标签就会显示一个确定进度的进度条。 - 举个例子，如果
max是100，value是50，那就是完成了50%。
-
max属性：- 它也是一个浮点数，表示整个任务的总量或者说完成任务所需的最大值。
- 这个值必须是正数。
- 如果
max属性不存在，那么它的默认值是1.0。 - 比如说，你有一个文件上传操作，总大小是10MB，那么
max就可以设为10。
不确定进度条：
一个很有意思的点是，如果你只写而没有value属性，它就会显示一个不确定进度的动画（通常是来回滚动或者闪烁的条），表示“我正在忙，但我不知道具体还要多久”。这在加载数据或者执行耗时操作时，但你又无法预估总时长的情况下非常有用。
如何在JavaScript中动态更新或控制HTML progress标签的进度？
动态更新进度条是它在实际应用中最常见的场景，比如文件上传、数据处理、视频缓冲等等。这基本上就是通过JavaScript来操作progress元素的value属性。
基本思路是：
- 获取到页面上的
progress元素。 - 根据你的业务逻辑（比如文件上传的进度回调、计时器等），计算出当前的进度值。
- 更新
progress元素的value属性。
这里我给你一个简单的JavaScript示例，模拟一个加载过程：
动态进度条示例
文件加载进度
0%
这个例子里，点击“开始加载”按钮后，进度条就会模拟一个从0到100%的加载过程。实际应用中，updateProgress函数里的进度值会来源于你的后端响应或者前端计算。我个人觉得，这种方式非常直观和高效，是构建用户友好界面的一个好方法。
