`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 を使用する例を次に示します (htmx-indicator の代わりに my-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 の設定を参照してください。最も簡単な方法は、HTML の <head> にこれを追加することです。

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