Прогресс-бар

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

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

Реализация прогресс-бара с использованием SweetAlert2

Для создания прогресс-бара с использованием SweetAlert2 потребуется использовать кастомные элементы, такие как встроенные HTML-элементы. В библиотеке доступна возможность создания модальных окон с произвольным содержимым, в том числе с элементами прогресс-бара. Обычно для этих целей используется HTML-элемент <progress>, который можно интегрировать в окно SweetAlert.

Шаг 1: Подключение SweetAlert2

Для начала необходимо подключить библиотеку SweetAlert2. Это можно сделать с помощью CDN или установить через npm.

  • CDN подключение:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  • Через npm:
npm install sweetalert2

После подключения библиотеки можно приступать к созданию окна с прогресс-баром.

Шаг 2: Создание прогресс-бара

Прогресс-бар в SweetAlert2 можно создать с использованием встроенных возможностей модальных окон. Основным элементом будет <progress> внутри модального окна.

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

Swal.fire({
  title: 'Загрузка...',
  html: '<progress value="0" max="100" id="progressBar" style="width: 100%;"></progress>',
  allowOutsideClick: false,
  didOpen: () => {
    const progressBar = document.getElementById('progressBar');
    let value = 0;
    
    const interval = setInterval(() => {
      value += 10;
      progressBar.value = value;
      
      if (value >= 100) {
        clearInterval(interval);
        Swal.fire('Загрузка завершена!', '', 'success');
      }
    }, 1000);
  }
});

В этом примере:

  • Внутри модального окна создается элемент <progress>, который представляет собой прогресс-бар.
  • С помощью JavaScript и функции setInterval мы обновляем значение прогресс-бара каждую секунду.
  • Когда прогресс-бар достигает 100%, интервал очищается и появляется уведомление о завершении загрузки.

Шаг 3: Настройка визуализации

Для создания прогресс-бара можно использовать не только стандартный элемент <progress>, но и другие варианты визуализации, например, через кастомные стили. Это позволяет гибко настроить внешний вид элемента под нужды проекта.

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

Swal.fire({
  title: 'Загрузка...',
  html: '<div id="progressContainer" style="width: 100%; background-color: #f3f3f3; border-radius: 10px; height: 30px;"><div id="progressBar" style="width: 0%; background-color: #4caf50; height: 100%; border-radius: 10px;"></div></div>',
  allowOutsideClick: false,
  didOpen: () => {
    const progressBar = document.getElementById('progressBar');
    let value = 0;
    
    const interval = setInterval(() => {
      value += 10;
      progressBar.style.width = value + '%';
      
      if (value >= 100) {
        clearInterval(interval);
        Swal.fire('Загрузка завершена!', '', 'success');
      }
    }, 1000);
  }
});

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

Шаг 4: Использование прогресс-бара с асинхронными операциями

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

Пример с асинхронной загрузкой:

async function fetchData() {
  const swal = Swal.fire({
    title: 'Загрузка...',
    html: '<progress value="0" max="100" id="progressBar" style="width: 100%;"></progress>',
    allowOutsideClick: false,
    didOpen: () => {
      const progressBar = document.getElementById('progressBar');
      let value = 0;
      
      const interval = setInterval(() => {
        value += 10;
        progressBar.value = value;
        
        if (value >= 100) {
          clearInterval(interval);
        }
      }, 1000);
    }
  });

  // Симуляция асинхронной операции
  await new Promise((resolve) => setTimeout(resolve, 10000)); // Задержка 10 секунд

  swal.update({
    title: 'Загрузка завершена!',
    icon: 'success'
  });
}

fetchData();

В данном примере используется асинхронная функция fetchData, которая выполняет длительную операцию (симулированную с помощью setTimeout). Во время работы функции обновляется прогресс-бар, а по завершению операции показывается сообщение об успехе.

Шаг 5: Заключение

Прогресс-бар в SweetAlert2 является полезным инструментом для создания визуальных индикаторов длительных процессов. С помощью библиотеки можно легко и быстро реализовать его в любых приложениях, при этом настройка и стилизация элемента предоставляют большой простор для кастомизации. Взаимодействие с асинхронными функциями и возможность динамически обновлять прогресс-бар делают его мощным инструментом для улучшения пользовательского интерфейса.

Оглавление