h5实现进度条
使用HTML5的<progress>标签
HTML5提供了原生进度条标签<progress>，适用于展示任务完成进度。基本语法如下：
<progress value="50" max="100"></progress>value：当前进度值（必需）max：总进度值（默认1）
自定义CSS样式
通过CSS可以美化原生进度条：
progress {
width: 300px;
height: 20px;
border-radius: 10px;
}
progress::-webkit-progress-bar {
background-color: #f0f0f0;
}
progress::-webkit-progress-value {
background-color: #4CAF50;
}动态更新进度
结合JavaScript实现动态进度更新：
let progressBar = document.querySelector('progress');
let currentValue = 0;
setInterval(() => {
currentValue += 10;
if(currentValue > 100) currentValue = 0;
progressBar.value = currentValue;
}, 500);使用Canvas绘制高级进度条
需要更复杂效果时可用Canvas实现：
<canvas id="myProgress" width="300" height="30"></canvas>
<script>
const canvas = document.getElementById('myProgress');
const ctx = canvas.getContext('2d');
function drawProgress(percent) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 背景
ctx.fillStyle = '#e0e0e0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 进度
ctx.fillStyle = '#FF7043';
ctx.fillRect(0, 0, canvas.width * percent/100, canvas.height);
// 文字
ctx.fillStyle = '#000';
ctx.font = '14px Arial';
ctx.fillText(`${percent}%`, 10, 20);
}
let p = 0;
setInterval(() => {
p = (p + 5) % 105;
drawProgress(Math.min(p, 100));
}, 200);
</script>使用第三方库
常见进度条库推荐：
- ProgressBar.js：支持圆形、直线等多种形状
- NProgress：适用于页面顶部细进度条
- anime.js：实现带动画效果的进度条
安装示例（以NProgress为例）：
npm install nprogress使用代码：
import NProgress from 'nprogress';
NProgress.start();
setTimeout(() => NProgress.done(), 2000);
