Bootstrap按钮加载中状态 LoadingButton实现-Bootstrap教程-PHP中文网

Bootstrap 5 中按钮 loading 状态需手动实现：必须同时设置 disabled="true"、aria-disabled="true"，替换文本并插入 spinner-border 元素；恢复时移除禁用属性并还原原始文案，且所有操作须在 finally 块中统一处理。

bootstrap按钮加载中状态 loadingbutton实现

Bootstrap 5 中如何让按钮进入 loading 状态

原生 Bootstrap 不提供 loading 属性或内置的加载中按钮组件，必须手动控制按钮的禁用状态、文字和视觉反馈。最稳妥的做法是用 JavaScript 动态切换 disabled 属性、替换 innerText，并添加 spinner 子元素。

常见错误是只加 spinner 不禁用按钮，导致用户重复点击；或用了 opacity: 0.6 却没设 pointer-events: none，依然可触发事件。

务必同时设置 disabled="true" 和 aria-disabled="true"，确保语义与交互一致
推荐使用 Bootstrap 5 内置的，避免自定义 SVG 尺寸错位
文字替换建议用 data-loading-text 自定义属性预存文案，方便复用

用纯 JS 实现一个可复用的 LoadingButton 函数

不需要引入额外库，一段轻量函数就能封装通用逻辑。核心是保存原始文本、插入 spinner、阻止重复提交。

示例场景：表单提交按钮点击后显示加载中，请求完成再恢复。

function setLoading(btn, isLoading) {
  const originalText = btn.dataset.originalText || btn.innerText;
  if (isLoading) {
    btn.disabled = true;
    btn.setAttribute('aria-disabled', 'true');
    btn.dataset.originalText = originalText;
    const spinner = document.createElement('span');
    spinner.className = 'spinner-border spinner-border-sm me-2';
    spinner.setAttribute('role', 'status');
    spinner.setAttribute('aria-hidden', 'true');
    btn.innerHTML = '';
    btn.appendChild(spinner);
    btn.appendChild(document.createTextNode(btn.dataset.loadingText || '加载中...'));
  } else {
    btn.disabled = false;
    btn.removeAttribute('aria-disabled');
    btn.innerText = originalText;
  }
}

btn.dataset.loadingText 可在 HTML 中提前写好：
注意用 innerHTML = '' 清空再重插，避免多次点击造成多个 spinner 堆叠
若按钮含图标（如），需改用 textContent + 克隆节点方式保留结构

Vue / React 项目里怎么避免重复实现

在框架中不应每次都在 click 回调里手动调用 setLoading，应抽象为指令或 Hook。

Vue 3 的自定义指令示例（v-loading）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

app.directive('loading', {
  beforeMount(el, binding) {
    el.dataset.loadingText = binding.value.text || '加载中...';
  },
  updated(el, binding) {
    setLoading(el, binding.value.active);
  }
});

React 中建议封装为 useLoadingButton Hook：

function useLoadingButton() {
  const [loading, setLoading] = useState(false);
  const toggleLoading = useCallback((state) => setLoading(state), []);
  return { loading, toggleLoading };
}