用bootstrap4和jq写一个请求进度条动画

好的，以下是一个简单的示例代码：

HTML 代码：

<!-- 进度条 -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
</div>

<!-- 按钮 -->
<button id="submit-btn" class="btn btn-primary">提交请求</button>

JavaScript 代码：

$(function() {
  // 绑定按钮点击事件
  $('#submit-btn').click(function() {
    // 发送请求
    $.ajax({
      url: 'your-api-url',
      type: 'POST',
      data: { /* 请求参数 */ },
      beforeSend: function() {
        // 请求发送之前，显示进度条并将进度条宽度重置为 0
        $('.progress').show();
        $('.progress-bar').css('width', '0%');
      },
      xhr: function() {
        // 创建 XMLHttpRequest 对象，用于获取请求进度
        var xhr = $.ajaxSettings.xhr();
        if (xhr.upload) {
          xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
              // 计算并更新进度条宽度
              var percent = e.loaded / e.total * 100;
              $('.progress-bar').css('width', percent + '%');
            }
          }, false);
        }
        return xhr;
      },
      success: function(data) {
        // 请求成功，隐藏进度条
        $('.progress').hide();
        // 处理返回数据
        // ...
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // 请求失败，隐藏进度条
        $('.progress').hide();
        // 处理错误信息
        // ...
      }
    });
  });
});

这个示例代码会在发送 AJAX 请求时显示一个进度条，并监听请求的进度，实时更新进度条的宽度。当请求成功或失败时，进度条会被隐藏。你可以根据实际情况对代码进行修改和优化。