`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}'>

Licensed under the Zero-Clause BSD License.
https://htmx.org/attributes/hx-indicator/