jquery进度条

使用 jQuery 创建进度条

jQuery 可以轻松实现动态进度条效果，以下是几种常见方法：

方法一：基于 HTML5 <progress> 元素

<progress id="jqProgress" value="0" max="100"></progress>
<button id="startBtn">开始加载</button>

$('#startBtn').click(function() {
  var progress = 0;
  var interval = setInterval(function() {
    progress += 5;
    $('#jqProgress').val(progress);
    if(progress >= 100) clearInterval(interval);
  }, 300);
});

方法二：使用 DIV 模拟进度条

<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<button id="animateBtn">动画加载</button>

.progress-container {
  width: 300px;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  width: 0%;
  background: #4CAF50;
  transition: width 0.3s;
}

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

方法三：结合 AJAX 请求进度

$.ajax({
  xhr: function() {
    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener('progress', function(e) {
      if(e.lengthComputable) {
        var percent = Math.round((e.loaded / e.total) * 100);
        $('#jqProgress').val(percent);
      }
    }, false);
    return xhr;
  },
  url: 'upload.php',
  type: 'POST',
  data: formData
});

进度条插件推荐

1. jQuery UI Progressbar

   

   $("#progressbar").progressbar({
   value: 37
   });

2. Bootstrap Progress Bar

   <div class="progress">
   <div class="progress-bar" role="progressbar" style="width: 25%"></div>
   </div>

3. NProgress.js

   NProgress.start();
   NProgress.set(0.4);
   NProgress.done();

自定义高级功能

实现带百分比显示的进度条：

<div class="custom-progress">
  <div class="progress-fill"></div>
  <span class="progress-text">0%</span>
</div>

function updateProgress(percent) {
  $('.progress-fill').css('width', percent + '%');
  $('.progress-text').text(percent + '%');
}

以上方法可根据实际需求选择使用，jQuery 的动画方法和 CSS 过渡效果能创建平滑的进度变化体验。