本篇文章向大家介绍《HTML progress 标签使用教程》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

HTML的标签用于显示进度条，通过设置value和max属性可控制进度。1. 使用标签可直接创建进度条，如表示完成50%；2. 未设value时显示不确定进度动画；3. 自定义样式需处理不同浏览器伪元素，如WebKit使用::-webkit-progress-bar和::-webkit-progress-value，Firefox使用::-moz-progress-bar；4. value表示当前进度，max表示总进度，二者共同决定进度比例；5. 可通过JavaScript动态更新value属性实现进度变化，如结合setInterval模拟加载过程。

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;
    }

一个完整的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属性。

基本思路是：

1. 获取到页面上的progress元素。
2. 根据你的业务逻辑（比如文件上传的进度回调、计时器等），计算出当前的进度值。
3. 更新progress元素的value属性。

这里我给你一个简单的JavaScript示例，模拟一个加载过程：

    
    
    
    


    
文件加载进度
    开始加载
    
    
0%

    

这个例子里，点击“开始加载”按钮后，进度条就会模拟一个从0到100%的加载过程。实际应用中，updateProgress函数里的进度值会来源于你的后端响应或者前端计算。我个人觉得，这种方式非常直观和高效，是构建用户友好界面的一个好方法。

到这里，我们也就讲完了《HTMLprogress标签实用教程详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JavaScript,进度条,value属性,HTMLprogress,max属性的知识点！