Прогресс-бары в уведомлениях

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

Подключение Toastify

Для работы с прогресс-барами сначала необходимо подключить библиотеку. Это можно сделать через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

Или через npm:

npm install toastify-js

После этого можно использовать объект Toastify для создания уведомлений.

Основные параметры прогресс-бара

Прогресс-бар в Toastify не требует дополнительного кода для отслеживания времени — он встроен в уведомление и синхронизируется с параметром duration. Основные параметры:

  • duration — время отображения уведомления в миллисекундах. Прогресс-бар будет уменьшаться пропорционально этому времени.
  • close — если true, появляется кнопка закрытия уведомления. Прогресс-бар при этом продолжает работать.
  • gravity и position — определяют расположение уведомления на экране, что влияет на визуальное восприятие прогресса.

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

Toastify({
  text: "Загрузка завершена",
  duration: 5000, // 5 секунд
  gravity: "top",
  position: "right",
  style: {
    background: "linear-gradient(to right, #00b09b, #96c93d)"
  }
}).showToast();

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

Кастомизация прогресс-бара

Toastify позволяет изменять стиль прогресс-бара через CSS. Основной селектор для стилизации:

.toastify-progress-bar {
  background-color: #ff6b6b;
  height: 4px;
}
  • background-color — цвет прогресс-бара.
  • height — толщина полосы.
  • transition — можно изменить скорость анимации или эффект плавного уменьшения.

Также можно использовать CSS-псевдоклассы для анимации:

.toastify-progress-bar::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ff6b6b, #ffe66d);
  animation: progress-animation 5s linear forwards;
}

@keyframes progress-animation {
  from { width: 100%; }
  to { width: 0%; }
}

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

Динамическое обновление прогресса

В стандартной реализации Toastify прогресс-бар синхронизирован с таймером уведомления и обновляется автоматически. Для динамических сценариев, когда прогресс зависит от внешнего события (например, загрузка файла), можно использовать кастомный DOM и обновлять ширину элемента через Jav * aScript:

let progress = document.createElement("div");
progress.classList.add("toastify-progress-bar");
toastElement.appendChild(progress);

let width = 100;
const interval = setInterval(() => {
  width -= 1;
  progress.style.width = width + "%";
  if (width <= 0) clearInterval(interval);
}, 50);

Такой подход позволяет полностью контролировать визуализацию прогресса, не ограничиваясь встроенным таймером Toastify.

Совмещение с другими эффектами

Прогресс-бары легко интегрируются с анимацией появления и исчезновения уведомлений:

Toastify({
  text: "Скачивание начато",
  duration: 7000,
  gravity: "bottom",
  position: "left",
  className: "animated-toast",
  stopOnFocus: true
}).showToast();

CSS-анимации:

.animated-toast {
  animation: slideInRight 0.5s, fadeOut 0.5s 6.5s forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

Прогресс-бар при этом будет плавно уменьшаться, синхронизируясь с анимацией исчезновения уведомления.

Советы по использованию прогресс-баров

  • Соответствие времени: значение duration должно совпадать с визуальным восприятием прогресса.
  • Цветовая индикация: можно менять цвет в зависимости от типа уведомления (успех, ошибка, предупреждение).
  • Плавность: использовать CSS transition для плавного уменьшения, чтобы прогресс-бар не дергался.
  • Адаптивность: учитывайте положение уведомления, чтобы прогресс-бар не перекрывал важный контент.

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

Оглавление