如何在Htmx请求时为按钮同时应用Bulma的is-loading类？

你完全可以在Htmx请求期间给按钮应用Bulma的is-loading类，不需要依赖单独的指示器元素，有两种简洁的实现方式：

方式一：通过Htmx事件动态控制类 #

Htmx会在请求的不同阶段触发全局事件，我们可以监听这些事件来给触发请求的按钮添加/移除is-loading类：

HTML 按钮代码 #

<button hx-post="/your-endpoint" class="button">提交请求</button>

JavaScript 事件监听 #

// 请求发送前，给按钮添加is-loading类
document.addEventListener('htmx:beforeSend', (e) => {
  if (e.target.tagName === 'BUTTON') {
    e.target.classList.add('is-loading');
  }
});

// 请求完成后，移除is-loading类
document.addEventListener('htmx:afterRequest', (e) => {
  if (e.target.tagName === 'BUTTON') {
    e.target.classList.remove('is-loading');
  }
});

这种方式直接复用Bulma原生的is-loading样式，无需额外编写CSS，兼容性和维护性都更好。

方式二：通过CSS映射Htmx请求状态 #

Htmx在请求期间会给触发请求的元素自动添加htmx-request类，我们可以通过CSS让带有这个类的按钮直接应用is-loading的样式：

如果使用Sass，可以直接继承样式：

/* 让htmx-request状态的按钮继承is-loading的样式 */
.button.htmx-request {
  @extend .is-loading;
}

如果使用普通CSS，需要手动复制Bulmais-loading类的样式代码到.button.htmx-request选择器下，示例如下：

.button.htmx-request {
  pointer-events: none;
  opacity: 0.6;
  position: relative;
}
.button.htmx-request::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid transparent;
  border-color: currentColor;
  border-right-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

内容的提问来源于stack exchange，提问作者Lucas Gabrielson