使用HTML的<progress>元素可创建原生进度条，通过value和max属性定义进度，结合CSS定制样式并用JavaScript动态控制进度，实现美观且功能完整的进度条组件。
在HTML中构建进度条，通常使用 <progress> 元素，它是一个原生的表单组件，用于表示任务的完成进度。虽然HTML本身不支持“函数”这一说法（那是JavaScript的概念），但可以通过组合HTML、CSS和少量JavaScript来创建可复用的进度条结构，并实现样式定制。
使用HTML创建基础进度条
最基本的进度条写法如下：
<progress value="60" max="100"></progress>
其中：
- value：当前进度值
- max：总进度的最大值
如果省略 value，则显示为不确定状态（常用于加载中动画）。
立即学习“前端免费学习笔记（深入）”；
通过CSS定制进度条样式
默认样式较单调，可通过CSS进行深度美化。不同浏览器内核（如WebKit/Blink 和 Firefox）需使用不同的伪元素来定制外观。
以下是一个跨浏览器兼容的样式示例：
/* WebKit浏览器 (Chrome, Safari, Edge) */
progress {
width: 300px;
height: 20px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
<p>progress::-webkit-progress-bar {
background-color: #f0f0f0;
border-radius: 10px;
}</p><p>progress::-webkit-progress-value {
background-color: #4caf50;
border-radius: 10px;
}</p><p>/<em> Firefox浏览器 </em>/
progress::-moz-progress-bar {
background-color: #4caf50;
border-radius: 10px;
}</p>你还可以添加动画效果让进度变化更平滑：
progress::-webkit-progress-value {
background-color: #4caf50;
border-radius: 10px;
transition: width 0.3s ease;
}
使用JavaScript动态控制进度
虽然HTML不能定义“函数”，但可以用JavaScript封装一个更新进度条的函数：
function setProgress(id, value) {
const progressBar = document.getElementById(id);
progressBar.value = value;
}
<p>// 使用示例
setProgress('myProgress', 75);</p>配合HTML：
<progress id="myProgress" value="0" max="100"></progress>
高级样式技巧与自定义外观
若需完全自定义样式（比如渐变色、阴影、文字覆盖等），建议用 div 模拟进度条，这样更灵活：
<div class="progress-container"> <div class="progress-bar" style="width: 60%;"></div> </div>
CSS样式：
.progress-container {
width: 300px;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
<p>.progress-bar {
height: 100%;
background: linear-gradient(to right, #66bb6a, #43a047);
border-radius: 10px;
transition: width 0.4s ease;
}</p>这种方式不受浏览器默认样式限制，适合复杂项目或设计系统集成。
基本上就这些。通过合理结合HTML语义标签、CSS美化和JavaScript控制，可以轻松构建出既美观又实用的进度条组件。关键是根据项目需求选择原生方案还是模拟方案。
