当前位置：首页 > jquery

jquery进度条

2026-03-02 16:16:14jquery

jQuery进度条实现方法

使用jQuery创建进度条有多种方式，可以通过UI库或自定义实现。以下是几种常见方法：

使用jQuery UI库 jQuery UI提供了内置的进度条组件，简单易用。需先引入jQuery和jQuery UI库文件。

<div id="progressbar"></div>
<script>
  $("#progressbar").progressbar({
    value: 37
  });
</script>

自定义进度条动画 通过CSS和jQuery动画实现自定义进度效果，适合需要高度定制化的场景。

<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<script>
  $(".progress-bar").animate({
    width: "75%"
  }, 1000);
</script>

AJAX请求进度显示 结合AJAX请求时显示加载进度，提升用户体验。

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = (evt.loaded / evt.total) * 100;
        $("#progressbar").progressbar("value", percentComplete);
      }
    }, false);
    return xhr;
  }
});

Bootstrap进度条 如果项目使用Bootstrap框架，可直接使用其进度条组件配合jQuery控制。

<div class="progress">
  <div class="progress-bar" role="progressbar"></div>
</div>
<script>
  $(".progress-bar").css("width", "65%").attr("aria-valuenow", 65);
</script>

关键参数配置

value: 设置进度条初始值（0-100）
max: 定义最大值（默认100）
change: 值变化时回调函数
complete: 达到100%时触发事件

样式自定义技巧

通过CSS可修改进度条外观：

.ui-progressbar-value {
  background-color: #4CAF50;
  transition: width 0.3s ease;
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%);
}