Индикатор прогресса

Driver.js — это библиотека для создания интерактивных туров по веб-приложению. Одной из важных функций, повышающих удобство восприятия таких туров, является индикатор прогресса, который показывает пользователю, сколько шагов осталось пройти, а сколько уже завершено.

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

Индикатор прогресса в Driver.js активируется через опцию showProgress. Это логическое значение, которое можно указать при создании экземпляра Driver:

const driver = new Driver({
    showProgress: true
});

При включении этой опции в правом верхнем углу подсветки элемента автоматически появляется полоса прогресса и текстовая метка вида Шаг 2 из 5. Это облегчает восприятие последовательности шагов и мотивирует пользователей проходить тур полностью.

Настройка текста прогресса

Driver.js позволяет кастомизировать текст индикатора с помощью функции onHighlightStarted или через глобальные параметры локализации. Например:

const driver = new Driver({
    showProgress: true,
    steps: [
        {
            element: '#button1',
            popover: {
                title: 'Кнопка 1',
                description: 'Описание кнопки'
            }
        },
        {
            element: '#input1',
            popover: {
                title: 'Поле ввода',
                description: 'Введите данные'
            }
        }
    ],
    onHighlightStarted: function(step) {
        const progressText = `Вы на шаге ${step.index + 1} из ${this.steps.length}`;
        document.querySelector('.driver-progress-text').innerText = progressText;
    }
});

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

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

Driver.js использует CSS для отображения прогресса. Стандартный класс .driver-progress можно изменять для кастомного дизайна:

.driver-progress {
    background-color: #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    height: 6px;
    margin-top: 8px;
}

.driver-progress-bar {
    background-color: #4caf50;
    height: 100%;
    transition: width 0.3s ease;
}
  • .driver-progress — контейнер для всей полосы.
  • .driver-progress-bar — заполняемая часть, отражающая текущий прогресс.

Благодаря плавной анимации transition визуальное обновление шага становится более динамичным.

Динамическое управление прогрессом

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

driver.defineSteps([
    {
        element: '#step1',
        popover: { title: 'Шаг 1', description: 'Начало процесса' }
    }
]);

driver.start();

// Позже добавляем новый шаг
driver.steps.push({
    element: '#step2',
    popover: { title: 'Шаг 2', description: 'Продолжение' }
});
driver.refresh(); // обновляем внутреннее состояние

После вызова refresh() индикатор прогресса автоматически учитывает новый шаг, корректно отображая текущую позицию пользователя.

Использование прогресса с кастомными элементами

Помимо встроенной полосы, Driver.js позволяет полностью заменять индикатор на собственный элемент, передавая кастомный контейнер через popover:

popover: {
    title: 'Пример',
    description: 'Индикатор прогресса можно кастомизировать',
    showProgress: false,
    customProgressContainer: '#myProgressContainer'
}

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

Лучшие практики

  • Всегда включать прогресс для длинных туров — пользователи видят, сколько осталось шагов, и меньше теряют интерес.
  • Сохранять последовательность — индикатор прогресса должен соответствовать фактическому порядку шагов.
  • Согласованная стилизация — цвет и форма полосы должны соответствовать общей теме интерфейса.
  • Использовать текстовую метку вместе с полосой — визуальная индикация и текст повышают восприятие прогресса.

Индикатор прогресса в Driver.js сочетает в себе простоту настройки и гибкость кастомизации, что позволяет создавать как стандартные, так и полностью интегрированные с дизайном приложения элементы визуальной обратной связи.

Оглавление