Автоматическое уменьшение прогресса

Для работы с автоматическим уменьшением прогресса в Noty необходимо подключить саму библиотеку. Стандартная установка производится через npm:

npm install noty

Либо можно подключить через CDN:

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

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

Основные свойства уведомления

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

  • text — содержимое уведомления.
  • type — тип уведомления: 'alert', 'success', 'error', 'warning', 'information'.
  • timeout — время автоматического закрытия в миллисекундах. Если указано false, уведомление не закрывается автоматически.
  • progressBar — логическое значение, включает или отключает индикатор прогресса.
  • animation — настройки анимации появления и исчезновения уведомления.

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

new Noty({
    text: 'Обработка данных...',
    type: 'information',
    timeout: 5000,
    progressBar: true,
    layout: 'topRight'
}).show();

Включение автоматического уменьшения прогресса

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

Пример уведомления с прогрессбаром и автоуменьшением:

new Noty({
    text: 'Скачивание файла',
    type: 'success',
    timeout: 7000,
    progressBar: true,
    layout: 'topRight'
}).show();

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

Пользовательская настройка прогресса

Можно вручную управлять прогрессбаром через методы setTimeout и noty.bar.progress(), что позволяет создавать кастомные эффекты уменьшения:

const myNoty = new Noty({
    text: 'Обновление данных',
    type: 'alert',
    timeout: false,
    progressBar: true,
    layout: 'bottomLeft'
}).show();

let progress = 1.0; // начальный прогресс
const interval = setInterval(() => {
    progress -= 0.01; // уменьшаем на 1% каждые 50 мс
    myNoty.bar.progress(progress);

    if (progress <= 0) {
        clearInterval(interval);
        myNoty.close();
    }
}, 50);

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

Настройка скорости уменьшения

Скорость прогресса можно регулировать через интервал и величину уменьшения. Формула выглядит так:

скорость = величина_шаг_уменьшения / интервал

Пример более быстрой анимации:

let progress = 1.0;
const interval = setInterval(() => {
    progress -= 0.05; // уменьшаем на 5%
    myNoty.bar.progress(progress);

    if (progress <= 0) {
        clearInterval(interval);
        myNoty.close();
    }
}, 50);

В этом примере уведомление закроется примерно за 1 секунду.

Интеграция с динамическими событиями

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

const myNoty = new Noty({
    text: 'Загрузка...',
    type: 'information',
    timeout: false,
    progressBar: true,
    layout: 'topCenter'
}).show();

async function fetchData() {
    const steps = 100;
    for (let i = 0; i < steps; i++) {
        await new Promise(resolve => setTimeout(resolve, 50));
        myNoty.bar.progress(1 - i / steps);
    }
    myNoty.close();
}

fetchData();

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

Стилизация прогрессбара

Прогрессбар можно кастомизировать через CSS, обращаясь к классу .noty_bar .noty_progressbar:

.noty_bar .noty_progressbar {
    background-color: #4CAF50;
    height: 5px;
    border-radius: 3px;
}

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

Взаимодействие с другими типами уведомлений

Автоматическое уменьшение прогресса работает для всех типов уведомлений (alert, success, error, warning, information). При необходимости можно комбинировать с кнопками действий или событиями onClose, onClick для более сложной логики.

Пример с кнопкой отмены:

const myNoty = new Noty({
    text: 'Загрузка данных',
    type: 'warning',
    timeout: false,
    progressBar: true,
    layout: 'topRight',
    buttons: [
        Noty.button('Отмена', 'btn btn-error', function () {
            myNoty.close();
        })
    ]
}).show();

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

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

Оглавление