jquery进度条

jQuery 进度条实现方法

使用 HTML5 <progress> 元素结合 jQuery

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

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

使用 jQuery UI Progressbar 组件

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

<div id="progressbar"></div>

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

function updateProgress() {
  var currentValue = $("#progressbar").progressbar("value");
  if(currentValue < 100) {
    $("#progressbar").progressbar("value", currentValue + 10);
    setTimeout(updateProgress, 500);
  }
}

updateProgress();

自定义 CSS 进度条控制

<div class="progress-container">
  <div class="progress-bar"></div>
</div>
<button class="progress-btn">开始进度</button>

.progress-container {
  width: 100%;
  background-color: #ddd;
  border-radius: 5px;
}

.progress-bar {
  height: 20px;
  width: 0%;
  background-color: #4CAF50;
  border-radius: 5px;
  transition: width 0.3s;
}

$('.progress-btn').click(function() {
  var width = 0;
  var interval = setInterval(function() {
    if(width >= 100) {
      clearInterval(interval);
    } else {
      width++;
      $('.progress-bar').css('width', width + '%');
    }
  }, 50);
});

使用 Bootstrap 进度条

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

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

var progress = 0;
var interval = setInterval(function() {
  progress += 5;
  $('#bootstrapProgress').css('width', progress + '%').attr('aria-valuenow', progress);
  if(progress >= 100) clearInterval(interval);
}, 300);

动画效果增强

$('#animatedProgress').animate({
  width: '100%'
}, {
  duration: 2000,
  step: function(now) {
    $(this).text(Math.round(now) + '%');
  }
});

以上方法提供了从简单到复杂的多种 jQuery 进度条实现方案，可根据项目需求选择适合的方式。jQuery UI 方案提供了最完整的 API 支持，而自定义 CSS 方案则具有更好的灵活性。