js实现加载效果

使用CSS动画实现加载效果

通过CSS定义旋转动画，结合JavaScript动态添加或移除加载元素。以下是一个简单的旋转加载动画实现：

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

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

<div id="loader" class="loader" style="display:none;"></div>

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

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

使用Promise模拟异步加载

结合Promise和setTimeout模拟异步操作时的加载效果：

function simulateAsyncOperation() {
  showLoader();

  return new Promise((resolve) => {
    setTimeout(() => {
      hideLoader();
      resolve('Operation completed');
    }, 2000);
  });
}

// 调用示例
simulateAsyncOperation().then(result => {
  console.log(result);
});

进度条加载效果

实现一个从0%到100%的进度条加载动画：

<div id="progress-container" style="width:100%;background:#ddd;">
  <div id="progress-bar" style="width:0%;height:30px;background:#4CAF50;"></div>
</div>

<script>
function startProgress() {
  let progress = 0;
  const bar = document.getElementById('progress-bar');
  const interval = setInterval(() => {
    progress += 1;
    bar.style.width = progress + '%';

    if(progress >= 100) {
      clearInterval(interval);
    }
  }, 50);
}
</script>

骨架屏加载效果

创建内容加载前的占位骨架：

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

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>

<div class="skeleton" style="width:100%;height:100px;"></div>

使用第三方库实现复杂效果

引入第三方库如Spin.js创建更丰富的加载动画：

<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>

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

<script>
const opts = {
  lines: 12,
  length: 30,
  width: 14,
  radius: 42,
  scale: 1,
  corners: 1,
  color: '#000',
  fadeColor: 'transparent',
  speed: 1,
  rotate: 0,
  animation: 'spinner-line-fade-quick',
  direction: 1
};

const target = document.getElementById('spinner-container');
const spinner = new Spinner(opts).spin(target);

// 停止旋转
// spinner.stop();
</script>