当前位置：首页 > HTML

h5 loading 实现

2026-03-06 12:40:55HTML

H5 Loading 实现方法

使用 CSS 动画实现简单 Loading

通过 CSS 的 @keyframes 和 animation 属性可以创建一个旋转的 Loading 动画。

<div class="loading-spinner"></div>

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

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

使用 SVG 实现复杂 Loading 动画

SVG 提供了更丰富的动画效果，可以通过 stroke-dasharray 和 stroke-dashoffset 实现路径动画。

<svg class="loading-circle" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#3498db" stroke-width="4"></circle>
</svg>

.loading-circle {
  width: 40px;
  height: 40px;
  animation: rotate 2s linear infinite;
}

.loading-circle circle {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
}

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

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}

使用 JavaScript 控制 Loading 显示与隐藏

通过 JavaScript 可以动态控制 Loading 的显示与隐藏，适用于异步加载场景。

function showLoading() {
  document.getElementById('loading').style.display = 'block';
}

function hideLoading() {
  document.getElementById('loading').style.display = 'none';
}

// 示例：在异步请求中调用
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    hideLoading();
    console.log(data);
  })
  .catch(error => {
    hideLoading();
    console.error(error);
  });

使用第三方库实现高级 Loading 效果

第三方库如 Spin.js 和 Lottie 可以提供更丰富的 Loading 效果。

Spin.js 示例：

<div id="spinner"></div>

var opts = {
  lines: 12,
  length: 10,
  width: 5,
  radius: 15,
  color: '#000',
  speed: 1,
  trail: 60,
  shadow: false
};

var spinner = new Spinner(opts).spin(document.getElementById('spinner'));

Lottie 示例：

<div id="lottie-loading"></div>

lottie.loadAnimation({
  container: document.getElementById('lottie-loading'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://assets9.lottiefiles.com/packages/lf20_p8bfn5to.json'
});

响应式 Loading 设计

通过媒体查询和相对单位确保 Loading 在不同设备上显示良好。

.loading-spinner {
  width: 5vw;
  height: 5vw;
  max-width: 50px;
  max-height: 50px;
  border: 0.5vw solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  animation: spin 1s linear infinite;
}

@media (max-width: 600px) {
  .loading-spinner {
    width: 10vw;
    height: 10vw;
  }
}

以上方法可以根据具体需求选择适合的实现方式，CSS 和 SVG 适用于简单场景，JavaScript 和第三方库适用于复杂交互和高级效果。

标签: loading