jquery 进度条

jQuery 进度条实现方法

使用 jQuery 实现进度条可以通过多种方式，以下是几种常见的方法：

使用 HTML5 <progress> 元素

HTML5 提供了原生进度条元素 <progress>，jQuery 可以动态更新其值。

<progress id="progressBar" value="0" max="100"></progress>
<button id="updateBtn">更新进度</button>

$('#updateBtn').click(function() {
    var progress = 0;
    var interval = setInterval(function() {
        progress += 10;
        $('#progressBar').val(progress);
        if (progress >= 100) clearInterval(interval);
    }, 500);
});

使用 CSS 和 jQuery 动画

通过动态修改 CSS 属性实现进度条效果。

<div class="progress-container">
    <div class="progress-bar"></div>
</div>
<button id="startBtn">开始加载</button>

.progress-container {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #4CAF50;
    transition: width 0.3s;
}

$('#startBtn').click(function() {
    $('.progress-bar').animate({ width: '100%' }, 2000);
});

使用第三方插件

jQuery UI 提供了完整的进度条组件。

<div id="progressbar"></div>
<button id="btnStart">开始</button>

$('#progressbar').progressbar({ value: 0 });
$('#btnStart').click(function() {
    var progress = 0;
    var interval = setInterval(function() {
        progress += 5;
        $('#progressbar').progressbar('value', progress);
        if (progress >= 100) clearInterval(interval);
    }, 300);
});

自定义进度条功能

实现一个带百分比显示的进度条。

<div class="custom-progress">
    <div class="progress-fill"></div>
    <span class="progress-text">0%</span>
</div>
<button id="customBtn">加载</button>

.custom-progress {
    width: 100%;
    height: 30px;
    background-color: #eee;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background-color: #3498db;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #333;
}

$('#customBtn').click(function() {
    var width = 0;
    var interval = setInterval(function() {
        width += 1;
        $('.progress-fill').css('width', width + '%');
        $('.progress-text').text(width + '%');
        if (width >= 100) clearInterval(interval);
    }, 50);
});

注意事项

• 进度更新频率应根据实际需求调整，避免过快或过慢
• 考虑添加动画过渡效果提升用户体验
• 在进度完成时触发回调函数执行后续操作
• 移动端需注意触摸事件的处理

以上方法可以根据具体项目需求选择使用，原生 HTML5 方式最简单，jQuery UI 功能最完善，自定义实现最灵活。