如何使用HTML、CSS和JavaScript实现操作时显示加载动画的按钮？

核心实现思路 #

• 给按钮设置两种状态：正常交互状态 / 加载中状态
• 用CSS控制加载动画的显示与隐藏，以及按钮文本的切换
• 通过JavaScript监听按钮点击，触发状态切换，并在异步操作（表单提交、内容加载）完成后恢复原状态

完整代码示例 #

HTML结构 #

<button class="loading-btn" id="actionBtn">执行操作</button>

CSS样式 #

.loading-btn {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  background-color: #2563eb;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
  position: relative;
  overflow: hidden;
}

.loading-btn:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
}

/* 加载动画样式 */
.loading-btn .spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 加载状态下的样式切换 */
.loading-btn.loading .btn-text {
  display: none;
}

.loading-btn.loading .spinner {
  display: block;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

JavaScript逻辑 #

const actionBtn = document.getElementById('actionBtn');

// 模拟异步任务（实际场景替换为表单提交、API请求等）
function runAsyncTask() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('操作执行完成');
    }, 2000);
  });
}

// 按钮点击事件处理
actionBtn.addEventListener('click', async () => {
  // 切换到加载状态
  actionBtn.classList.add('loading');
  actionBtn.disabled = true;

  try {
    // 执行异步操作
    const result = await runAsyncTask();
    console.log(result);
    // 可添加成功后的业务逻辑，比如弹窗提示、页面跳转
  } catch (err) {
    console.error('操作失败:', err);
    // 可添加错误处理逻辑，比如显示错误提示
  } finally {
    // 无论成功失败，都恢复按钮状态
    actionBtn.classList.remove('loading');
    actionBtn.disabled = false;
  }
});

关键细节说明 #

• 防重复点击：加载状态下禁用按钮，避免用户多次触发操作
• 状态稳定性：用finally块确保异步操作完成后，按钮一定会恢复原状态
• 样式灵活性：可根据需求修改按钮配色、动画样式（比如换成跳动圆点、进度条），调整尺寸适配不同页面场景

内容的提问来源于stack exchange，提问作者Olandria Christian