Анимация прогресс-бара

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

По умолчанию прогресс-бар включен и анимируется от 0% до 100% за время, равное timeout. Настройка прогресс-бара осуществляется через свойства progressBar и progressBarColor.

iziToast.show({
    title: 'Загрузка',
    message: 'Идёт процесс...',
    timeout: 5000,           // Время жизни уведомления в миллисекундах
    progressBar: true,        // Включение прогресс-бара
    progressBarColor: 'rgb(0, 255, 184)' // Цвет прогресс-бара
});

Управление анимацией прогресс-бара

Автоматическая анимация включается по умолчанию, и прогресс-бар плавно заполняется за указанное время timeout. Если timeout равен 0, прогресс-бар не будет отображаться.

iziToast.show({
    title: 'Событие',
    message: 'Прогресс автоматически',
    timeout: 4000,
    progressBar: true
});

Ручное управление позволяет динамически изменять состояние прогресса, используя метод setProgress. Этот метод принимает значение от 0 до 100, что соответствует проценту заполнения.

let toast = iziToast.show({
    title: 'Ручное управление',
    message: 'Прогресс обновляется вручную',
    timeout: 0, // уведомление не исчезает автоматически
    progressBar: true
});

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

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

Цвет и стиль можно изменять через параметры progressBarColor и progressBarClass.

iziToast.show({
    title: 'Стильный прогресс',
    message: 'Пользовательский цвет и класс',
    timeout: 3000,
    progressBar: true,
    progressBarColor: '#ff5722',       // hex или rgb
    progressBarClass: 'my-progress-bar' // кастомный CSS класс
});

Пример CSS для кастомного прогресс-бара:

.my-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #ff5722, #ffc107);
}

Контроль положения и направления прогресс-бара

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

.my-progress-bar-reverse {
    transform-origin: right;
    animation: fillBar 4s linear forwards;
}

@keyframes fillBar {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

Прерывание и сброс прогресса

Прогресс-бар можно останавливать, сбрасывать или изменять его динамически в ответ на события. Для этого используется комбинация методов setProgress и hide/reset.

let toast = iziToast.show({
    title: 'Прерывание прогресса',
    message: 'Остановим через 2 секунды',
    timeout: 5000,
    progressBar: true
});

setTimeout(() => {
    toast.setProgress(50); // остановка прогресса на 50%
}, 2000);

setTimeout(() => {
    toast.hide(); // скрыть уведомление полностью
}, 4000);

Интеграция с асинхронными процессами

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

let toast = iziToast.show({
    title: 'Загрузка файла',
    message: 'Процент завершения: 0%',
    timeout: 0,
    progressBar: true
});

let progress = 0;
function downloadSimulator() {
    progress += 5;
    toast.setProgress(progress);
    toast.setMessage(`Процент завершения: ${progress}%`);
    if (progress < 100) {
        setTimeout(downloadSimulator, 200);
    } else {
        toast.hide();
    }
}

downloadSimulator();

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

Дополнительные возможности

  • progressBarEasing — задаёт функцию сглаживания анимации (linear, easeInOut, easeOutBounce и т.д.).
  • progressBarColor и progressBarClass — для динамического изменения цвета или внешнего вида во время жизни уведомления.
  • Возможность совмещать прогресс-бар с кнопками и событиями внутри уведомления, создавая интерактивные уведомления.

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

Оглавление