用bootstrap4和jq ,进度条根据请求加载

可以使用以下代码来实现用 Bootstrap 4 和 jQuery 进度条根据请求加载：

HTML 代码：

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

JavaScript 代码：

// 定义请求的 URL
const url = "your_api_url_here";

// 获取进度条元素
const progressBar = $("#progress-bar");

// 发送请求
$.ajax({
  url: url,
  xhr: function() {
    // 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest();
    // 监听请求进度
    xhr.onprogress = function(event) {
      // 计算请求进度
      const progress = event.loaded / event.total * 100;
      // 更新进度条
      progressBar.css("width", progress + "%");
    };
    return xhr;
  }
}).done(function(data) {
  // 请求成功时将进度条设为 100%
  progressBar.css("width", "100%");
}).fail(function() {
  // 请求失败时将进度条设为红色
  progressBar.addClass("bg-danger");
});

在上面的代码中，我们首先定义了请求的 URL，然后获取了进度条元素。使用 jQuery 的 `$.ajax` 方法发送请求时，我们通过 `xhr` 参数获取到创建的 XMLHttpRequest 对象，并监听了请求进度。当请求进度更新时，我们计算出当前的进度并更新进度条；当请求成功时，我们将进度条设为 100%；当请求失败时，我们将进度条设为红色。