前端小伙伴们在开发中经常需要用到jquery进度条来增加交互感，今天就来介绍几种jquery插件。赶快用起来吧，非常好用哦。

有许多jQuery插件可以用来创建进度条，以下是一些流行的选择：

1. jQuery UI Progressbar
2. Bootstrap Progress Bar
3. jQuery ProgressBar
4. EasyPieChart
5. progressbar.js

1. jQuery UI Progressbar

安装

首先，你需要引入jQuery和jQuery UI库。

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

使用

然后，你可以使用以下代码来创建一个进度条。

<div id="progressbar"></div>
<button id="start-btn">Start</button>

<script>
$(document).ready(function() {
    $("#progressbar").progressbar({
        value: false
    });

    var progress = 0;
    var interval;

    $('#start-btn').click(function() {
        if (interval) {
            clearInterval(interval);
        }
        progress = 0;
        $("#progressbar").progressbar("value", 0);
        
        interval = setInterval(function() {
            progress += 10;
            $("#progressbar").progressbar("value", progress);
            
            if (progress >= 100) {
                clearInterval(interval);
                alert('Progress complete!');
            }
        }, 1000); // Update every second
    });
});
</script>

2. Bootstrap Progress Bar

安装

引入Bootstrap CSS和JS文件。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>

使用

使用Bootstrap的进度条组件。

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<button id="start-btn">Start</button>

<script>
$(document).ready(function() {
    var progress = 0;
    var interval;

    $('#start-btn').click(function() {
        if (interval) {
            clearInterval(interval);
        }
        progress = 0;
        $('.progress-bar').css('width', '0%').attr('aria-valuenow', 0);
        
        interval = setInterval(function() {
            progress += 10;
            $('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
            
            if (progress >= 100) {
                clearInterval(interval);
                alert('Progress complete!');
            }
        }, 1000); // Update every second
    });
});
</script>

3. jQuery ProgressBar

安装

下载并引入jQuery ProgressBar插件。

<link rel="stylesheet" href="path/to/jquery.progressbar.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.progressbar.js"></script>

使用

使用jQuery ProgressBar插件。

<div id="progressbar"></div>
<button id="start-btn">Start</button>

<script>
$(document).ready(function() {
    $("#progressbar").progressbar();
    var progress = 0;
    var interval;

    $('#start-btn').click(function() {
        if (interval) {
            clearInterval(interval);
        }
        progress = 0;
        $("#progressbar").progressbar("setValue", 0);
        
        interval = setInterval(function() {
            progress += 10;
            $("#progressbar").progressbar("setValue", progress);
            
            if (progress >= 100) {
                clearInterval(interval);
                alert('Progress complete!');
            }
        }, 1000); // Update every second
    });
});
</script>