如何在网页视图中为每个页面加载颤动实现进度指示器？

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

#progress-indicator {
  width: 0;
  height: 4px;
  background-color: blue;
  transition: width 0.3s ease-in-out;
}

window.onload = function() {
  var progressIndicator = document.getElementById('progress-indicator');
  
  // Show progress indicator
  progressIndicator.style.width = '0%';
  
  // Fetch page resources
  var xhr = new XMLHttpRequest();
  xhr.open('GET', window.location.href, true);
  xhr.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      progressIndicator.style.width = percentComplete + '%';
    }
  };
  xhr.onloadend = function() {
    // Hide progress indicator
    progressIndicator.style.width = '100%';
    setTimeout(function() {
      progressIndicator.style.display = 'none';
    }, 300);
  };
  xhr.send();
};