请求指示器

当发出 AJAX 请求时，让用户知道正在发生的事情通常是件好事，因为浏览器不会给他们任何反馈。你可以在 htmx 中使用 htmx-indicator 类来完成此操作。

定义 htmx-indicator 类，以便默认情况下具有该类的任何元素的不透明度为 0，使其不可见但存在于 DOM 中。

当 htmx 发出请求时，它会将 htmx-request 类放在一个元素（请求元素或其他元素，如果指定）上。htmx-request 类将导致带有 htmx-indicator 类的子元素过渡到不透明度 1，显示指示器。

<button hx-get="/click">
    Click Me!
    <img class="htmx-indicator" src="/spinner.gif">
</button>

这里有一个按钮。单击该按钮时，htmx-request将添加类，从而显示旋转器 gif 元素。（最近我喜欢SVG 旋转器。）

虽然htmx-indicator该类使用不透明度来隐藏和显示进度指示器，但如果你更喜欢其他机制，你可以创建自己的 CSS 转换，如下所示：

这里我们有一个按钮。单击后，将向其添加 htmx-request 类，这将显示旋转 gif 元素。（我现在喜欢 SVG 旋转）。

虽然 htmx-indicator 类使用 opacity 来隐藏和显示进度指示器，但如果您更喜欢其他机制，您可以创建自己的 CSS 过渡，如下所示：

.htmx-indicator{
    display:none;
}
.htmx-request .htmx-indicator{
    display:inline;
}
.htmx-request.htmx-indicator{
    display:inline;
}

如果你想要将 htmx-request 添加到不同的元素，可以将 hx-indicator 属性与 CSS 选择器一起使用：

<div>
    <button hx-get="/click" hx-indicator="#indicator">
        Click Me!
    </button>
    <img id="indicator" class="htmx-indicator" src="/spinner.gif"/>
</div>

这里我们通过 id 显式调用指示器。请注意，我们也可以将类放在父 div 上，并产生相同的效果。

你还可以使用 hx-disabled-elt 属性在请求期间将 disabled 属性添加到元素。