使用html progress标签可创建语义化进度条，通过value和max属性定义进度，结合css伪元素自定义样式，如圆角、渐变色，并用javaScript动态更新value实现动画效果，适配多浏览器显示。

在网页中展示任务完成进度，progress 标签是 html5 提供的原生方案，语义清晰且易于使用。它不仅能直观反映加载或处理状态，还能通过 CSS 轻松美化样式，适配不同设计需求。

使用HTML progress标签创建基础进度条

progress 标签用于表示某项任务的完成进度，有两个核心属性：value 表示当前进度值，max 表示总进度值。

例如，表示任务已完成 60%：

<progress value=”60″ max=”100″></progress>

若未设置 max，默认为 1；value 超出范围时，浏览器会自动限制显示效果。该标签无需闭合内容，只用于展示状态，不包含文本说明。

立即学习“前端免费学习笔记（深入）”；

通过CSS自定义进度条外观

默认样式较简单，不同浏览器呈现效果不一。使用 CSS 可以完全控制进度条的视觉表现，包括背景、颜色、高度和圆角等。

以下是一些关键的伪元素选择器：

百度虚拟主播

百度智能云平台的一站式、灵活化的虚拟主播直播解决方案

36

查看详情

• progress：选中外层容器
• ::-webkit-progress-bar：WebKit内核浏览器的背景区域（如chrome、edge）
• ::-webkit-progress-value：已填充部分
• ::-moz-progress-bar：firefox 的已填充部分

示例：将进度条变高并添加圆角与渐变色：

<style>
  progress {
    width: 100%;
    height: 24px;
    border-radius: 12px;
    overflow: hidden;
  }
  progress::-webkit-progress-bar {
    background-color: #e0e0e0;
  }
  progress::-webkit-progress-value {
    background-image: linear-gradient(to right, #4CAF50, #8BC34A);
    border-radius: 12px;
  }
  progress::-moz-progress-bar {
    background-image: linear-gradient(to right, #4CAF50, #8BC34A);
    border-radius: 12px;
  }
</style>

动态更新进度的javascript配合方法

静态进度条用途有限，结合 JavaScript 可实现动态更新。比如模拟文件上传过程：

<progress id=”uploadProgress” value=”0″ max=”100″></progress>
<script>
  const prog = document.getElementById(‘uploadProgress’);
  let val = 0;
  const timer = setInterval(() => {
    val += 5;
    prog.value = val;
    if (val >= 100) clearInterval(timer);
  }, 300);
</script>

通过修改 value 属性，进度条会自动重绘。可结合实际逻辑（如 ajax 上传监听）实时反馈状态。

基本上就这些。用 progress 标签结构语义正确，再搭配 CSS 美化和 js 控制，就能做出既实用又美观的进度条。跨浏览器兼容性需注意伪元素写法差异，测试时建议覆盖主流浏览器。