hx-indicator

hx-indicator 属性允许你指定在请求期间要添加 htmx-request 类的元素。这可用于在请求进行时显示进度条。

此属性的值是要应用类的一个或多个元素的 CSS 查询选择器，或关键字 closest，后跟一个 CSS 选择器，它将找到与给定 CSS 选择器匹配的最近的父元素或自身（例如，closest tr）;

下面是一个在按钮旁边带有旋转器的示例：

<div>
    <button hx-post="/example" hx-indicator="#spinner">
        Post It!
    </button>
    <img  id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
</div>

当请求正在进行时，这将导致 htmx-request 类被添加到 #spinner 图像中。图像 htmx-indicator 上也有类，它定义了一个不透明度转换，将显示旋转器：

.htmx-indicator{
    opacity:0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator{
    opacity:1;
}
.htmx-request.htmx-indicator{
    opacity:1;
}

如果你希望使用不同的效果来显示旋转器，你可以定义并使用自己的指示器 CSS。以下是使用 display 而不是不透明度的示例（请注意，我们使用 my-indicator 而不是htmx-indicator）：

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

请注意，选择器的目标 hx-indicator 不必是你想要显示的确切元素：它可以是指示器父层次结构中的任何元素。

最后，请注意，默认情况下，htmx-request 类会添加到导致请求的元素中，因此你可以在该元素内放置一个指示符，而不需要使用属性明确调用它 hx-indicator：

<button hx-post="/example">
    Post It!
   <img  class="htmx-indicator" src="/img/bars.svg"/>
</button>

笔记

hx-indicator 可以继承并放置在父元素上
如果没有明确的指示，则该类 htmx-request 将被添加到触发请求的元素中
如果你想使用自己的 CSS 但仍将其用作 htmx-indicator 类名，则需要禁用 includeIndicatorStyles。请参阅配置 htmx 。最简单的方法是将其添加到 <head> HTML 中：

<meta name="htmx-config" content='{"includeIndicatorStyles": false}'>