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

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

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

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

iziToast.show({
    title: 'Загрузка',
    message: 'Идёт процесс...',
    progressBar: true
});

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

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

Прогресс-бар поддерживает несколько параметров для настройки:

  • progressBarColor – цвет полосы прогресса. Например:
iziToast.show({
    title: 'Успешно',
    message: 'Данные сохранены',
    progressBar: true,
    progressBarColor: 'green'
});
  • progressBarEasing – тип анимации для изменения длины полосы. Можно использовать стандартные easing-функции CSS, например linear, easeInOutQuad и другие.
iziToast.show({
    title: 'Загрузка',
    message: 'Идёт процесс...',
    progressBar: true,
    progressBarEasing: 'linear'
});
  • progressBarThickness – толщина полосы в пикселях. Это можно задать через CSS:
.iziToast-progressbar {
    height: 6px;
}

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

Помимо автоматического уменьшения, можно управлять прогрессом вручную. Для этого используется метод setProgress:

let toast = iziToast.show({
    title: 'Загрузка',
    message: 'Идёт процесс...',
    progressBar: true,
    timeout: false
});

let progress = 0;
let interval = setInterval(() => {
    progress += 10;
    toast.setProgress(progress);
    if(progress >= 100) clearInterval(interval);
}, 500);

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

Прогресс-бар с пользовательским тайм-аутом

По умолчанию тайм-аут уведомления задаётся свойством timeout в миллисекундах. Прогресс-бар автоматически привязывается к этому тайм-ауту. Пример с длительным уведомлением:

iziToast.show({
    title: 'Информация',
    message: 'Сообщение закроется через 10 секунд',
    timeout: 10000,
    progressBar: true
});

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

Использование прогресс-бара в динамических процессах

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

let current = 0;

let toast = iziToast.show({
    title: 'Загрузка файлов',
    message: '0% выполнено',
    progressBar: true,
    timeout: false,
    close: false
});

let uploadInterval = setInterval(() => {
    current += 20;
    toast.setProgress(current);
    toast.setMessage(`${current}% выполнено`);
    if(current >= 100){
        clearInterval(uploadInterval);
        toast.update({title: 'Готово', message: 'Загрузка завершена'});
    }
}, 1000);

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

Поддержка кастомных стилей

Прогресс-бар полностью стилизуется через CSS:

.iziToast-progressbar {
    background: linear-gradient(to right, #4caf50, #81c784);
    height: 8px;
    border-radius: 4px;
}

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

Советы по использованию

  • Для уведомлений с автоматическим закрытием лучше оставлять progressBar включённым, чтобы пользователь видел таймер.
  • В сценариях долгих операций рекомендуется использовать ручное управление прогрессом для более точной визуализации процесса.
  • Стилизация прогресс-бара через CSS позволяет создавать уникальные визуальные эффекты и улучшает UX.

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

Оглавление