#5 – Работа с сервером в HTMX

Атрибут hx-indicator используется в HTMX для отображения элемента загрузки (например, анимации или текста «Загрузка...») во время выполнения запроса. Это позволяет пользователю видеть, что данные обрабатываются, и улучшает пользовательский опыт (UX).

Как работает hx-indicator

Когда запрос инициируется (например, через hx-get или hx-post), HTMX добавляет CSS-класс htmx-request к элементу, указанному в hx-indicator. Это делает индикатор видимым. После завершения запроса класс удаляется, и индикатор исчезает.

Пример использования

<div id="loader" class="htmx-indicator">Загрузка...</div>
<button hx-get="/load" hx-target="#result" hx-indicator="#loader">Загрузить данные</button>

<div id="result"></div> 

В этом примере, при нажатии на кнопку выполняется GET-запрос, и пока он выполняется, HTMX добавляет класс htmx-request к элементу #loader. 

Советы

• Вы можете использовать любые элементы (текст, иконку, анимацию) в качестве индикатора
• Можно использовать разные индикаторы для разных запросов
• Старайтесь размещать индикатор рядом с элементом действия (например, кнопкой)