Параметр progressBar

Параметр progressBar отвечает за отображение индикатора прогресса в уведомлениях, создаваемых с помощью библиотеки Noty. Этот индикатор визуально показывает, сколько времени осталось до автоматического закрытия уведомления (timeout).

По умолчанию Noty автоматически создает полоску прогресса, если timeout задан и progressBar включен. Полоска располагается в нижней части уведомления и постепенно уменьшается, отражая оставшееся время.

Подключение и базовое использование

new Noty({
    text: 'Сохранение прошло успешно',
    type: 'success',
    timeout: 3000,
    progressBar: true
}).show();

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

Ключевые моменты:

  • progressBar: true — включение визуального индикатора.
  • Полоса прогресса автоматически синхронизируется с timeout.
  • Если timeout не задан или равен false, полоска не отображается, даже при progressBar: true.

Настройка положения и внешнего вида

Noty предоставляет возможность контролировать визуальный стиль прогресс-бара через CSS. Стандартно используется класс .noty_progressbar.

Пример изменения цвета и высоты:

.noty_progressbar {
    height: 4px;
    background-color: #4caf50;
}

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

.noty_type_success .noty_progressbar {
    bottom: auto;
    top: 0;
}

Теперь индикатор будет отображаться сверху уведомления вместо стандартного нижнего положения.

Интерактивность прогресс-бара

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

  • onHover — при наведении мыши на уведомление прогресс-бара можно приостановить.
  • onClose — прогресс автоматически завершает уведомление при закрытии.

Пример с паузой при наведении:

new Noty({
    text: 'Идет загрузка...',
    type: 'information',
    timeout: 5000,
    progressBar: true,
    animation: {
        open: 'animated fadeInDown',
        close: 'animated fadeOutUp'
    },
    callbacks: {
        onHover: function() {
            this.stop(); // приостановка таймера
        },
        onHoverExit: function() {
            this.resume(); // возобновление таймера
        }
    }
}).show();

Особенности:

  • this.stop() останавливает автоматическое закрытие уведомления и прогресс-бара.
  • this.resume() возобновляет отсчет времени и визуальное уменьшение прогресс-бара.

Сочетание с другими параметрами Noty

  • timeout — прогресс-бара нет без заданного времени жизни уведомления.
  • type — можно стилизовать разные типы уведомлений с уникальными цветами полоски.
  • layout — прогресс-бар адаптируется к положению уведомления (topRight, bottomLeft и др.).
  • theme — темы Noty могут менять стандартный вид полоски прогресса; при необходимости можно полностью переопределять стили.

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

Полоску можно контролировать и программно, вызывая методы экземпляра Noty:

let n = new Noty({
    text: 'Обновление данных...',
    timeout: 10000,
    progressBar: true
}).show();

// Через 3 секунды ускорить закрытие
setTimeout(() => {
    n.setTimeout(2000); // изменяем оставшееся время таймера
}, 3000);

Метод setTimeout() автоматически корректирует визуальное отображение прогресс-бара, чтобы оно соответствовало новому времени закрытия уведомления.

Примеры продвинутого использования

1. Прогресс-бар без автоматического закрытия:

new Noty({
    text: 'Процесс выполняется...',
    timeout: false,
    progressBar: true
}).show();

Полоса будет отображаться, но уведомление не закроется автоматически. Можно вручную обновлять progress через методы или стили.

2. Пользовательский прогресс через CSS-анимацию:

@keyframes customProgress {
    0% { width: 100%; }
    100% { width: 0%; }
}

.noty_progressbar {
    animation: customProgress 5s linear forwards;
    background-color: #ff9800;
}

Применение такой анимации позволяет создавать уникальные визуальные эффекты, полностью отделенные от стандартного поведения Noty.

Резюме по параметру progressBar

  • Отвечает за визуальный индикатор оставшегося времени уведомления.
  • Работает только при наличии timeout.
  • Позволяет управлять положением, цветом и стилем через CSS.
  • Может быть приостановлен, возобновлен или программно управляем.
  • Совместим с темами, анимациями и различными типами уведомлений.

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

Оглавление