如何使用javascript / jquery在滚动条上设置引导进度条动画？

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="progress-bar.css">

<div id="progress-bar"></div>

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #007bff;
  z-index: 9999;
  transition: width 0.3s ease;
}

$(window).scroll(function() {
  var scrollTop = $(window).scrollTop();
  var documentHeight = $(document).height();
  var windowHeight = $(window).height();
  var scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;
  $("#progress-bar").css("width", scrollPercent + "%");
});