当前位置：首页 > JavaScript

js实现加载效果

2026-04-07 16:14:30JavaScript

加载效果的实现方法

在JavaScript中实现加载效果可以通过多种方式完成，以下介绍几种常见的方法：

使用CSS动画结合JavaScript

通过CSS定义加载动画样式，JavaScript控制显示和隐藏。

js实现加载效果

.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

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

function showLoader() {
  document.getElementById('loader').style.display = 'block';
}

function hideLoader() {
  document.getElementById('loader').style.display = 'none';
}

使用Promise实现异步加载效果

在处理异步操作时显示加载效果。

function fetchData() {
  showLoader();

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      hideLoader();
      resolve('Data loaded');
    }, 2000);
  });
}

fetchData().then(data => console.log(data));

使用第三方库

许多流行的库如Spin.js、Loaders.css等提供了现成的解决方案。

js实现加载效果

// 使用Spin.js
var opts = {
  lines: 13,
  length: 28,
  width: 14,
  radius: 42,
  scale: 1,
  corners: 1,
  color: '#000',
  fadeColor: 'transparent',
  speed: 1,
  rotate: 0,
  animation: 'spinner-line-fade-quick',
  direction: 1
};

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

进度条加载效果

对于需要显示进度的情况，可以使用进度条。

function updateProgress(percent) {
  document.getElementById('progress-bar').style.width = percent + '%';
  document.getElementById('progress-text').innerText = percent + '%';
}

// 模拟进度更新
let progress = 0;
const interval = setInterval(() => {
  progress += 10;
  updateProgress(progress);
  if (progress >= 100) clearInterval(interval);
}, 500);

骨架屏效果

在内容加载前显示占位图形。

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

function showSkeleton() {
  document.querySelectorAll('.content').forEach(el => {
    el.classList.add('skeleton');
  });
}

function hideSkeleton() {
  document.querySelectorAll('.content').forEach(el => {
    el.classList.remove('skeleton');
  });
}

这些方法可以根据具体需求选择使用，CSS动画适合简单的旋转加载效果，Promise适合处理异步操作时的加载状态，第三方库提供了更多样式选择，进度条适合需要显示加载进度的场景，骨架屏则能提升用户体验。