`hx-indicator`

hx-indicator 属性允许您指定在请求期间将添加 htmx-request 类的元素，可用于在请求过程中显示加载指示器或进度条。

该属性的值是CSS选择器，用于选择要添加类的元素，或者是关键字closest后跟CSS选择器，这将查找与给定CSS选择器匹配的最近祖先元素或自身（例如closest tr）。

以下是一个按钮旁边显示加载指示器的示例：

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

注意您也可以使用inherit关键字继承父级的指示器值并添加额外的指示器CSS选择器：

<main hx-indicator="#global-indicator">
    ...
    <button hx-post="/example" hx-indicator="inherit, #spinner">
        提交!
    </button>
    <img  id="spinner" class="htmx-indicator" src="/img/bars.svg"/>
</main>

当请求进行时，这会导致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">
    提交!
   <img  class="htmx-indicator" src="/img/bars.svg"/>
</button>

演示

这模拟了在此情况下加载指示器的外观：

注意事项

hx-indicator 具有继承性，可以放置在父元素上
在没有显式指示器的情况下，htmx-request类将被添加到触发请求的元素上
如果您想使用自己的CSS但仍使用htmx-indicator作为类名，则需要禁用includeIndicatorStyles。参见配置htmx。最简单的方法是在HTML的<head>中添加：

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