Настройка цветов прогресс-бара

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

Основные свойства прогресс-бара

Для изменения цвета прогресс-бара используются следующие параметры:

  • progressBar – включает или отключает отображение прогресс-бара. Значение по умолчанию: true.
  • progressBarColor – задаёт цвет прогресс-бара. Может быть любым допустимым CSS-цветом (HEX, RGB, RGBA, HSL или название цвета).
  • progressBarEasing – управляет анимацией прогресс-бара, задаётся как строка с названием функции сглаживания (например, "linear", "easeInOut").

Пример базовой конфигурации:

iziToast.show({
    title: 'Успех',
    message: 'Данные сохранены',
    progressBar: true,
    progressBarColor: '#4caf50',
    progressBarEasing: 'linear'
});

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

Использование RGBA и градиентов

Цвет прогресс-бара не ограничен сплошными цветами. Можно использовать прозрачность через rgba:

iziToast.show({
    title: 'Внимание',
    message: 'Процесс выполнения...',
    progressBarColor: 'rgba(255, 0, 0, 0.7)'
});

Это позволяет создать более мягкий визуальный эффект. Однако библиотека не поддерживает CSS-градиенты напрямую для прогресс-бара. Чтобы реализовать градиентный эффект, придётся использовать кастомные стили через onOpening или onOpened и изменять стиль элемента .iziToast-progressbar:

iziToast.show({
    title: 'Информация',
    message: 'Градиентный прогресс',
    onOpening: function(instance, toast){
        toast.querySelector('.iziToast-progressbar').style.background = 'linear-gradient(to right, #ff0000, #0000ff)';
    }
});

Глобальная настройка цветов прогресс-бара

Для установки цвета прогресс-бара для всех уведомлений можно использовать метод iziToast.settings():

iziToast.settings({
    progressBarColor: '#2196f3',
    progressBarEasing: 'easeInOut'
});

После этого все последующие уведомления будут иметь синий прогресс-бар с анимацией easeInOut, если в конкретном уведомлении не переопределено это свойство.

Изменение цвета прогресс-бара для разных типов уведомлений

Часто требуется, чтобы цвет прогресс-бара соответствовал типу уведомления:

iziToast.success({
    title: 'Успех',
    message: 'Операция выполнена',
    progressBarColor: '#4caf50'
});

iziToast.error({
    title: 'Ошибка',
    message: 'Что-то пошло не так',
    progressBarColor: '#f44336'
});

iziToast.warning({
    title: 'Предупреждение',
    message: 'Проверьте данные',
    progressBarColor: '#ff9800'
});

iziToast.info({
    title: 'Информация',
    message: 'Новое сообщение',
    progressBarColor: '#2196f3'
});

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

Динамическое изменение цвета прогресс-бара

Для создания интерактивных эффектов можно динамически менять цвет прогресс-бара во время отображения уведомления. Для этого используется метод setInterval вместе с доступом к элементу .iziToast-progressbar:

let counter = 0;
const toast = iziToast.show({
    title: 'Загрузка',
    message: 'Процесс идет...',
    progressBar: true,
    timeout: 5000,
    onOpening: function(instance, toastElement){
        const bar = toastElement.querySelector('.iziToast-progressbar');
        const interval = setInterval(() => {
            counter += 1;
            bar.style.background = `rgb(${Math.min(255, counter*5)}, 0, 255)`;
            if(counter >= 50) clearInterval(interval);
        }, 100);
    }
});

В этом примере цвет прогресс-бара постепенно меняется от синего к фиолетовому в процессе отображения уведомления.

Итоговые рекомендации по цветам прогресс-бара

  • Использовать сплошные цвета или rgba для простоты и стабильной работы.
  • Для разных типов уведомлений устанавливать различные цвета, чтобы визуально разделять сообщения.
  • При необходимости динамических эффектов применять onOpening / onOpened и изменять стиль прогресс-бара вручную.
  • Для глобальных изменений цвета использовать iziToast.settings(), чтобы уменьшить дублирование кода.

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

Оглавление