当前位置：首页 > JavaScript

js 实现 loading

2026-04-05 15:14:41JavaScript

实现 Loading 效果的 JavaScript 方法

使用 CSS 动画与 JavaScript 控制

通过 CSS 定义动画效果，JavaScript 控制显示与隐藏：

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

function showLoading() {
  const spinner = document.createElement('div');
  spinner.className = 'loading-spinner';
  spinner.id = 'loadingSpinner';
  document.body.appendChild(spinner);
}

function hideLoading() {
  const spinner = document.getElementById('loadingSpinner');
  if (spinner) {
    spinner.remove();
  }
}

使用 Promise 封装异步操作

将 Loading 状态与异步操作结合：

function withLoading(promise) {
  showLoading();
  return promise.finally(() => {
    hideLoading();
  });
}

// 使用示例
withLoading(fetch('https://api.example.com/data'))
  .then(response => response.json())
  .then(data => console.log(data));

基于 SVG 的高级 Loading 效果

创建更复杂的矢量图形动画：

<svg id="svgLoader" width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" stroke="#eee" stroke-width="8" fill="none"/>
  <circle cx="50" cy="50" r="40" stroke="#3498db" stroke-width="8" 
          stroke-dasharray="251" stroke-dashoffset="251" fill="none">
    <animate attributeName="stroke-dashoffset" from="251" to="0" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

function toggleSvgLoading(show) {
  const loader = document.getElementById('svgLoader');
  loader.style.display = show ? 'block' : 'none';
}

进度条式 Loading

实现可显示进度的加载条：

<div id="progressContainer" style="width:100%;background:#ddd;">
  <div id="progressBar" style="height:20px;width:0%;background:#4CAF50;"></div>
</div>

let progress = 0;
const interval = setInterval(() => {
  progress += 10;
  document.getElementById('progressBar').style.width = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);