自定义HTML进度条样式与属性设置方法

value：表示当前进度值，必须为0到max之间的数字。若未设置，进度条可能显示为不确定状态（常表现为动画流动效果）。

max：定义任务的总值，默认为1。当value与max均为1时，进度为100%。

这两个属性可动态更新，适用于JavaScript实时控制场景，如文件上传或数据加载过程。

不同浏览器对的渲染机制不同，尤其是WebKit/Blink内核（如Chrome、Edge）与Firefox在伪元素支持上存在差异。因此，样式定制需考虑跨浏览器兼容性。

在Chrome等浏览器中，可通过以下伪元素控制外观：

• ::-webkit-progress-bar：整个进度条容器
• ::-webkit-progress-value：已填充部分
• ::-webkit-progress-inner-element：内部包裹层（较少使用）

示例代码：

<style>
progress {
  width: 300px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}
progress::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 10px;
}
progress::-webkit-progress-value {
  background-color: #4caf50;
  border-radius: 10px;
  transition: width 0.3s ease;
}
progress::-moz-progress-bar {
  background-color: #4caf50;
  border-radius: 10px;
}
</style>
  

Firefox使用::-moz-progress-bar控制已填充区域，不支持::-moz-progress-value，因此需直接设置该伪元素背景。

为提升用户体验，可在进度条上叠加文字提示、渐变背景或动画效果。

实现带百分比文本的方案之一是使用相对定位的外层容器：

• 将置于position: relative的父容器中
• 用元素绝对定位在进度条中央
• 通过JavaScript同步更新文本内容

渐变背景可通过CSS渐变函数实现：

background-image: linear-gradient(45deg, #66bb6a 25%, transparent 25%),
                  linear-gradient(-45deg, #66bb6a 25%, transparent 25%),
                  linear-gradient(45deg, transparent 75%, #66bb6a 75%),
                  linear-gradient(-45deg, transparent 75%, #66bb6a 75%);
background-size: 20px 20px;
  

配合animation可实现“扫描”式流动效果，增强动态感。