#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.
Советы
- Вы можете использовать любые элементы (текст, иконку, анимацию) в качестве индикатора
- Можно использовать разные индикаторы для разных запросов
- Старайтесь размещать индикатор рядом с элементом действия (например, кнопкой)
Матеріали для курсу
Щоб завантажувати матеріали до відеокурсів, необхідно оформити підписку на сайт
Завдання до уроку
Необхідно оформити передплату на проект, щоб отримати доступ до всіх домашніх завдань
Велике завдання за курсом
Вам необхідно оформити передплату на сайті, щоб мати доступ до всіх великих завдань. У завдання входить методика рішення, а також готовий проект з відповіддю до завдання.
PS: подібні завдання доступні при підписці від 1 місяця
Також варто подивитися
