`hx-indicator`

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

¥The hx-indicator attribute allows you to specify the element that will have the htmx-request class added to it for the duration of the request. This can be used to show spinners or progress indicators while the request is in flight.

此属性的值是应用该类的元素的 CSS 查询选择器，或关键字 closest，后跟 CSS 选择器，它将查找与给定 CSS 选择器匹配的最近的祖级元素或其本身（例如 closest tr）；

¥The value of this attribute is a CSS query selector of the element or elements to apply the class to, or the keyword closest, followed by a CSS selector, which will find the closest ancestor element or itself, that matches the given CSS selector (e.g. closest tr);

以下是按钮旁边的加载控件的示例：

¥Here is an example with a spinner adjacent to the button:

<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 类，它定义了将显示加载控件的不透明度转换：

¥When a request is in flight, this will cause the htmx-request class to be added to the #spinner image. The image also has the htmx-indicator class on it, which defines an opacity transition that will show the spinner:

    .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）：

¥If you would prefer a different effect for showing the spinner you could define and use your own indicator CSS. Here is an example that uses display rather than opacity (Note that we use my-indicator instead of htmx-indicator):

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

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

¥Note that the target of the hx-indicator selector need not be the exact element that you want to show: it can be any element in the parent hierarchy of the indicator.

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

¥Finally, note that the htmx-request class by default is added to the element causing the request, so you can place an indicator inside of that element and not need to explicitly call it out with the hx-indicator attribute:

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

演示

¥Demo

这模拟了加载控件在该情况下的外观：

¥This simulates what a spinner might look like in that situation:

注释

¥Notes

hx-indicator 是继承的，可以放在父元素上

¥hx-indicator is inherited and can be placed on a parent element
在没有明确指示的情况下，htmx-request 类将添加到触发请求的元素中

¥In the absence of an explicit indicator, the htmx-request class will be added to the element triggering the request
如果你想使用自己的 CSS 但仍使用 htmx-indicator 作为类名，则需要禁用 includeIndicatorStyles。参见配置 htmx。最简单的方法是将其添加到 HTML 的 <head> 中：

¥If you want to use your own CSS but still use htmx-indicator as class name, then you need to disable includeIndicatorStyles. See Configuring htmx. The easiest way is to add this to the <head> of your HTML:

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