bootstrap+jquery动态进度条，进度条为圆角边框蓝色带条纹，从0到100的进度条

Bootstrap和jQuery可以轻松地创建动态的、带有圆角边框和蓝白条纹效果的进度条。以下是一个简单的步骤指南：

1. 首先，在HTML中添加基础的Bootstrap进度条元素：

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100"></div>
</div>

2. 引入必要的CSS样式，为进度条添加圆角和颜色：

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  animation: progress-bar-stripes 2s linear infinite;
}

.progress-bar-rounded {
  border-radius: 16px; /* 根据需要调整圆角大小 */
}

3. 使用JavaScript或jQuery来动态更新进度值和显示动画：

$(document).ready(function() {
  var progressBar = $('.progress-bar');
  function updateProgress(newVal) {
    progressBar.css('width', newVal + '%');
  }

  // 示例：从0%到100%渐进
  for (var i = 0; i <= 100; i += 1) {
    setTimeout(function() { updateProgress(i); }, i * 10); // 每隔1秒增加1%
  }
});