当前位置：首页 > JavaScript

js实现加载进度条

2026-04-04 08:06:54JavaScript

实现加载进度条的方法

在JavaScript中实现加载进度条可以通过多种方式完成，以下是几种常见的方法：

使用HTML和CSS创建基础结构

在HTML中创建一个进度条容器和一个进度条元素：

<div class="progress-container">
  <div class="progress-bar" id="progressBar"></div>
</div>

CSS样式可以这样设置：

.progress-container {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #4CAF50;
  border-radius: 10px;
  transition: width 0.3s ease;
}

使用JavaScript更新进度

通过JavaScript动态更新进度条的宽度：

function updateProgress(percentage) {
  const progressBar = document.getElementById('progressBar');
  progressBar.style.width = percentage + '%';
}

// 示例：模拟加载过程
let progress = 0;
const interval = setInterval(() => {
  progress += 10;
  updateProgress(progress);
  if (progress >= 100) {
    clearInterval(interval);
  }
}, 500);

使用XMLHttpRequest监控真实加载进度

如果需要监控实际资源的加载进度，可以使用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'your-file-url', true);

xhr.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    updateProgress(percentComplete);
  }
};

xhr.onload = function() {
  updateProgress(100);
};

xhr.send();

使用Fetch API和ReadableStream

对于现代浏览器，可以使用Fetch API和ReadableStream实现更精细的进度控制：

fetch('your-file-url')
  .then(response => {
    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    let receivedLength = 0;

    return new Promise((resolve) => {
      function readChunk() {
        reader.read().then(({ done, value }) => {
          if (done) {
            resolve();
            return;
          }

          receivedLength += value.length;
          const percentComplete = (receivedLength / contentLength) * 100;
          updateProgress(percentComplete);

          readChunk();
        });
      }
      readChunk();
    });
  });