Включение прогресс-бара

Для использования прогресс-бара в уведомлениях необходимо подключить саму библиотеку Noty. Обычно это делается через npm или CDN. После подключения можно создавать уведомления с помощью конструктора new Noty(options).

new Noty({
    text: 'Загрузка данных...',
    type: 'info',
    progressBar: true, // включение прогресс-бара
    timeout: 5000
}).show();

Ключевой параметр: progressBar: true активирует отображение полосы прогресса в нижней части уведомления. По умолчанию прогресс-бар анимируется автоматически, уменьшаясь до нуля по истечении времени timeout.

Настройка внешнего вида прогресс-бара

Noty позволяет настраивать прогресс-бар визуально через CSS. Основные возможности включают изменение цвета, толщины и позиции:

.noty_progressbar {
    background-color: #3498db; /* основной цвет */
    height: 4px;               /* высота полосы */
}

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

Управление прогресс-баром через события

Noty предоставляет события, позволяющие контролировать прогресс-бар в динамике. Основные события:

  • onShow — срабатывает при отображении уведомления. Можно запускать анимацию или таймер.
  • onClose — срабатывает при закрытии уведомления, прогресс-бар автоматически исчезает.
  • onTimerEnd — срабатывает, когда таймер уведомления достигает конца, то есть прогресс-бар полностью заполняется или опустошается.

Пример использования события onShow:

let n = new Noty({
    text: 'Идет процесс...',
    type: 'info',
    progressBar: true,
    timeout: false, // отключаем автоматическое закрытие
    callbacks: {
        onShow: function() {
            let progress = 0;
            let interval = setInterval(() => {
                progress += 10;
                this.barDom.style.width = progress + '%';
                if (progress >= 100) {
                    clearInterval(interval);
                    this.close();
                }
            }, 500);
        }
    }
}).show();

В этом примере прогресс-бар обновляется вручную с шагом 10% каждые 500 мс до полного заполнения.

Применение прогресс-бара с динамическим временем

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

new Noty({
    text: 'Файл загружается...',
    type: 'success',
    progressBar: true,
    timeout: 3000 // 3 секунды до автоматического закрытия
}).show();

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

Анимация и плавность прогресса

Noty использует CSS-анимацию для плавного уменьшения прогресс-бара. При ручном управлении анимацию можно изменить через свойство transition в CSS:

.noty_progressbar {
    transition: width 0.3s linear;
}

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

Совместное использование нескольких уведомлений

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

let n1 = new Noty({ text: 'Загрузка 1...', progressBar: true }).show();
let n2 = new Noty({ text: 'Загрузка 2...', progressBar: true }).show();

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

Встроенные методы для прогресс-бара

Основные методы, связанные с прогресс-баром:

  • show() — отображение уведомления с анимацией прогресса.
  • close() — немедленное закрытие уведомления и прогресс-бара.
  • setText(text) — обновление текста уведомления без сброса прогресса.
  • setTimeout(timeout) — динамическое изменение таймера и синхронизации прогресс-бара.

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

Оглавление