progress 标签有两个属性：max 表示总量，value 表示当前值。不设 value 时标签进入不确定状态（indeterminate），显示为动态滚动条，适合处理中但未知进度的场景。用 JS 不断更新 value 就是下载、上传、安装等进度展示，比 div + width 的拼装方案语义化且无障碍友好。
meter 标签是近亲，用于已知范围的静态度量（磁盘占用、评分），有 low/high/optimum 属性划分区间颜色。progress 的样式定制需要针对 ::-webkit-progress-bar 与 ::-webkit-progress-value 两个伪元素分别写，Firefox 用 ::-moz-progress-bar，兼容写法要分开处理。
<style> .wrap { width: 300px; padding: 14px; border: 1px solid #4a9eff; border-radius: 10px; } progress { width: 100%; height: 18px; } progress::-webkit-progress-bar { background: #e78a3e; border-radius: 9px; } progress::-webkit-progress-value { background: #4a9eff; border-radius: 9px; } .lbl { margin-top: 8px; color: #555; } </style> <div class="wrap"> <progress id="pg" max="100" value="0"></progress> <div class="lbl" id="lb">准备开始</div> </div> <script> var v = 0, pg = document.getElementById('pg'), lb = document.getElementById('lb'); var tm = setInterval(function () { v += 5; pg.value = v; lb.textContent = '进度 ' + v + '%'; if (v >= 100) { clearInterval(tm); lb.textContent = '完成'; } }, 300); </script>