hx-indicator

Синтаксис

<button hx-post="/submit" hx-indicator="#spinner">Submit</button>

Задайте CSS-селектор, чтобы выбрать элементы индикатора.

Используйте closest SELECTOR, чтобы выбрать сам элемент или ближайший подходящий элемент-предок.

Пример со значком загрузки рядом с кнопкой:

<div>
    <button hx-post="/example" hx-indicator="#spinner">
        Post It!
    </button>
    <img  id="spinner" class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</div>

Используйте модификатор :append, чтобы сохранить индикаторы родительских элементов и добавить другие селекторы (родительский элемент должен предоставлять своё значение через :inherited):

<main hx-indicator:inherited="#global-indicator">
    ...
    <button hx-post="/example" hx-indicator:append="#spinner">
        Post It!
    </button>
    <img  id="spinner" class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</main>

Во время выполнения запроса к изображению #spinner будет добавлен класс htmx-request. У изображения также есть класс htmx-indicator, который задаёт переход прозрачности и отображает значок загрузки:

    .htmx-indicator {
        opacity: 0;
        visibility: hidden;
    }
    .htmx-request .htmx-indicator,
    .htmx-request.htmx-indicator {
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms ease-in;
    }

Этот CSS htmx-indicator по умолчанию также задаёт скрытую видимость для повышения доступности для программ чтения с экрана и обеспечивает быстрое появление за счёт изменения прозрачности.

Если вы предпочитаете другой эффект отображения значка загрузки, можно определить и использовать собственный CSS для индикатора. Вот пример, в котором вместо прозрачности используется display (обратите внимание: мы используем my-indicator вместо htmx-indicator):

    .my-indicator{
        display:none;
    }
    .htmx-request .my-indicator,
    .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" alt="Loading..."/>
</button>

Задержка отображения индикатора

При быстрых запросах кратковременное появление значка загрузки может выглядеть дёрганым.

Это можно исправить, добавив задержку к CSS-переходу, который отображает индикатор:

.htmx-indicator {
    opacity: 0;
    visibility: hidden;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease-in 200ms;  /* fade duration, then delay */
}

Демонстрация

Здесь показано, как может выглядеть значок загрузки в такой ситуации:

<button class="btn" classes="toggle htmx-request:3s">
    Post It!
   <img  class="htmx-indicator" src="/img/bars.svg" alt="Loading..."/>
</button>

Примечания

• Если индикатор явно не задан, класс htmx-request будет добавлен к элементу, инициирующему запрос
• Если вы хотите использовать собственный CSS, сохранив имя класса htmx-indicator, необходимо отключить includeIndicatorCSS. См. раздел Настройка htmx. Проще всего добавить это в <head> HTML-документа:

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

• Если вы хотите использовать собственный CSS и полностью отключить встроенные стили индикатора, задайте для includeIndicatorCSS значение false и разместите собственный CSS-файл с копией нужного вам стиля htmx-indicator, приведённого выше