h5实现进度条
使用HTML5的<progress>标签
HTML5提供了<progress>标签，可以快速实现进度条功能。该标签有两个属性：value（当前值）和max（最大值）。进度条会自动根据这两个值计算百分比。
<progress value="50" max="100"></progress>动态更新进度可以通过JavaScript修改value属性：
document.querySelector('progress').value = 75;使用CSS自定义样式
<progress>标签的默认样式较简单，可以通过CSS伪元素进行美化：
progress {
width: 300px;
height: 20px;
border-radius: 10px;
}
progress::-webkit-progress-bar {
background-color: #f0f0f0;
border-radius: 10px;
}
progress::-webkit-progress-value {
background-color: #4CAF50;
border-radius: 10px;
}使用<div>模拟进度条
如果需要更灵活的样式控制，可以用<div>元素模拟进度条：
<div class="progress-container">
<div class="progress-bar" style="width: 50%;"></div>
</div>对应CSS：
.progress-container {
width: 300px;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #4CAF50;
transition: width 0.3s ease;
}JavaScript动态更新：
document.querySelector('.progress-bar').style.width = '75%';动画效果实现
通过CSS动画可以实现加载动画效果：
@keyframes progress-animation {
0% { width: 0%; }
100% { width: 100%; }
}
.animated-progress {
animation: progress-animation 2s ease-in-out infinite;
}使用Canvas绘制
对于复杂进度条，可以使用Canvas API：
<canvas id="progressCanvas" width="300" height="20"></canvas>JavaScript绘制代码：
const canvas = document.getElementById('progressCanvas');
const ctx = canvas.getContext('2d');
function drawProgress(percent) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 背景
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 进度条
ctx.fillStyle = '#4CAF50';
ctx.fillRect(0, 0, canvas.width * (percent/100), canvas.height);
}
drawProgress(50); // 初始50%响应式设计技巧
使用百分比单位或vw/vh单位确保进度条在不同设备上适配：
.progress-container {
width: 80vw;
max-width: 500px;
}结合媒体查询调整不同屏幕尺寸下的样式：
@media (max-width: 600px) {
progress {
height: 15px;
}
}
