`hx-indicator`

hx-indicator 屬性允許您指定在請求期間會被加入 htmx-request class 的元素。這可以用於在請求進行時顯示讀取中指示器或進度條。

此屬性的值是 CSS 查詢選擇器，用來選擇要套用 class 的一個或多個元素，或是關鍵字 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 class 被加入到 #spinner 圖片。圖片也有 htmx-indicator class，它定義了一個不透明度轉換來顯示讀取中指示器

    .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 class 預設會被加入到觸發請求的元素，因此您可以將指示器放在該元素內，而無需使用 hx-indicator 屬性明確呼叫它。

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

示範

這模擬了在該情況下讀取中指示器可能呈現的樣子

筆記

hx-indicator 是可以繼承的，並且可以放在父元素上
在沒有明確的指示器的情況下，htmx-request class 會被加入到觸發請求的元素
如果您想使用自己的 CSS，但仍然將 htmx-indicator 作為 class 名稱，那麼您需要禁用 includeIndicatorStyles。請參閱配置 htmx。最簡單的方法是在 HTML 的 <head> 中加入以下程式碼

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