Полоса этапов для сайта (stepper на HTML и CSS)
Напишите по одному этапу в строке, выберите текущий и стиль. Предпросмотр обновляется сразу, а код готов к вставке.
Как пользоватьсяПокажите, на каком шаге человек
Доступно на: 
Полоса этапов для сайта (stepper на HTML и CSS): для чего нужен
Создайте полосу, которая показывает, на каком шаге человек: корзина, доставка, оплата и подтверждение; данные, адрес и проверка; заказ получен, готовится и в пути. Напишите по одному этапу в строке, выберите текущий, направление и цвета. Завершённые этапы получают галочку, а линия между ними показывает прогресс.
Код использует упорядоченный список с aria-current со значением step у текущего этапа и скрытое сообщение «завершён» для программ чтения с экрана. В горизонтальном режиме на узких экранах полоса показывает только цифры и название текущего этапа. Есть также функция irPara(n) для смены этапа через JavaScript.
Как пользоваться
- Напишите этапы, по одному в строке.
- Выберите текущий этап, направление и цвета.
- Скопируйте код или скачайте HTML.
Когда использовать
- Оформление заказа в интернет-магазине.
- Форма регистрации по частям.
- Отслеживание заказа.
Частые вопросы
Доступна ли полоса этапов?
Да. Это упорядоченный список (ol), поэтому программа чтения с экрана объявляет число этапов и позицию каждого. Текущий этап получает aria-current со значением step, а у завершённых есть скрытый текст «завершён».
Работает ли на телефоне?
В горизонтальном режиме на узких экранах полоса показывает только цифры и название текущего этапа, чтобы текст не сжимался. Вертикальный режим одинаково работает на любом экране и хорош для отслеживания заказов.
Как сменить текущий этап через JavaScript?
Поменяйте классы: предыдущие этапы получают feito, текущий — atual и aria-current со значением step, а следующие остаются без класса. Сгенерированный код содержит функцию irPara(n), которая это делает.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.