Кастомные индикаторы загрузки

В работе с веб-приложениями важным аспектом является создание пользовательского опыта, который будет интерактивным и информативным. Одним из элементов, который играет ключевую роль в восприятии работы сайта, является индикатор загрузки. В HTMX создание кастомных индикаторов загрузки — это важная часть улучшения взаимодействия пользователя с приложением. HTMX предоставляет простой способ добавить динамическое поведение на страницы без необходимости вручную управлять состоянием DOM с помощью JavaScript. Это можно легко адаптировать для отображения кастомных индикаторов загрузки во время асинхронных запросов.

Стандартный индикатор загрузки

HTMX позволяет использовать встроенные механизмы для отображения индикатора загрузки во время выполнения запроса. Например, используя атрибут hx-indicator, можно указать элемент, который будет отображаться во время ожидания ответа от сервера.

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

<div hx-get="/some-endpoint" hx-target="#result" hx-indicator="#loading">
  Загрузить данные
</div>

<div id="loading" style="display: none;">
  <img src="loading-spinner.gif" alt="Загрузка...">
</div>

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

В этом примере при клике на элемент с hx-get, HTMX выполнит запрос, и пока данные загружаются, будет отображаться элемент с ID loading. После завершения запроса элемент будет скрыт.

Использование кастомных индикаторов

HTMX предоставляет гибкость в изменении поведения индикаторов загрузки. Кастомизация индикаторов позволяет менять не только внешний вид, но и взаимодействие с пользователем. Для этого можно использовать как простые изображения, так и более сложные анимации или анимационные библиотеки.

1. Использование CSS анимаций

Для создания простых и лёгких кастомных индикаторов можно использовать CSS-анимации. Например, можно создать индикатор в виде вращающегося круга, используя только CSS.

Пример кастомного индикатора с CSS-анимацией:

<div hx-get="/data" hx-target="#content" hx-indicator="#spinner">
  Загрузить данные
</div>

<div id="spinner" style="display: none;">
  <div class="spinner"></div>
</div>

<div id="content"></div>

<style>
  .spinner {
    border: 4px solid transparent;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Этот индикатор будет использовать стилизованный круг с анимацией вращения, которая будет отображаться в момент загрузки.

2. Анимации с использованием JavaScript

Для более сложных случаев, например, если требуется синхронизация с другими процессами на странице или комбинирование с внешними библиотеками, можно использовать JavaScript для изменения поведения индикатора.

Пример с использованием внешней библиотеки, например, Spin.js:

<div hx-get="/fetch-data" hx-target="#result" hx-indicator="#loading">
  Получить данные
</div>

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

<script src="https://cdn.jsdelivr.net/npm/spin.js"></script>
<script>
  const spinnerOpts = {
    lines: 13,
    length: 0,
    width: 8,
    radius: 10,
    scale: 1.5,
    color: '#3498db',
    speed: 1,
    trail: 60,
    shadow: true,
    hwaccel: true,
    zIndex: 2e9
  };
  
  document.querySelector('[hx-indicator="#loading"]').addEventListener('htmx:beforeRequest', function(event) {
    const spinner = new Spin(spinnerOpts).spin(document.getElementById('loading'));
  });
  
  document.querySelector('[hx-indicator="#loading"]').addEventListener('htmx:afterRequest', function(event) {
    const spinnerElement = document.getElementById('loading');
    if (spinnerElement) {
      spinnerElement.innerHTML = '';
    }
  });
</script>

В этом примере используется библиотека Spin.js для создания кастомного индикатора, который будет отображаться при каждом запросе.

Взаимодействие с состоянием запроса

HTMX предоставляет события, которые можно использовать для контроля появления и исчезновения индикаторов загрузки в зависимости от состояния запроса. Это позволяет создавать более динамичные и отзывчивые интерфейсы.

Некоторые важные события HTMX:

  • htmx:beforeRequest — событие, которое срабатывает перед отправкой запроса.
  • htmx:afterRequest — событие, которое срабатывает после получения ответа от сервера.
  • htmx:responseError — событие, которое срабатывает в случае ошибки запроса.

Пример использования этих событий для управления индикатором загрузки:

<div hx-get="/fetch-data" hx-target="#result" hx-indicator="#loading">
  Загрузить данные
</div>

<div id="loading" style="display: none;">
  <div class="spinner"></div>
</div>

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

<script>
  document.addEventListener('htmx:beforeRequest', function(event) {
    document.getElementById('loading').style.display = 'block';
  });

  document.addEventListener('htmx:afterRequest', function(event) {
    document.getElementById('loading').style.display = 'none';
  });

  document.addEventListener('htmx:responseError', function(event) {
    document.getElementById('loading').style.display = 'none';
    alert('Ошибка при загрузке данных');
  });
</script>

В этом примере индикатор загрузки будет показываться перед отправкой запроса и скрываться после его завершения. Если запрос завершится ошибкой, будет показано предупреждение.

Интерактивные индикаторы с прогрессом

В более сложных приложениях можно добавить индикатор, который отображает прогресс загрузки. Для этого можно использовать события HTMX для отслеживания состояния прогресса. Однако стоит отметить, что для этого сервер должен поддерживать передачу прогресса.

Пример с использованием прогресс-бара:

<div hx-get="/fetch-data" hx-target="#result" hx-indicator="#loading">
  Загрузить данные
</div>

<div id="loading" style="display: none;">
  <div id="progress" style="width: 0%; height: 5px; background-color: #3498db;"></div>
</div>

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

<script>
  document.addEventListener('htmx:beforeRequest', function(event) {
    document.getElementById('loading').style.display = 'block';
    document.getElementById('progress').style.width = '0%';
  });

  document.addEventListener('htmx:progress', function(event) {
    const progress = event.detail.progress;
    document.getElementById('progress').style.width = progress + '%';
  });

  document.addEventListener('htmx:afterRequest', function(event) {
    document.getElementById('loading').style.display = 'none';
  });
</script>

Здесь прогресс-бар будет обновляться в зависимости от состояния загрузки. Это полезно для отображения динамических процессов, таких как загрузка больших файлов или длительные вычисления на сервере.

Заключение

Создание кастомных индикаторов загрузки с использованием HTMX позволяет значительно улучшить восприятие приложения пользователями. Библиотека предоставляет гибкие механизмы для работы с индикаторами загрузки, от простых решений с использованием CSS до сложных анимаций и взаимодействий через JavaScript. Правильное использование индикаторов позволяет сделать интерфейс более динамичным и информативным, что повышает качество пользовательского опыта.

Оглавление