Barra de pasos para sitio web (stepper en HTML y CSS)

Barra de pasos para sitio web (stepper en HTML y CSS): para qué sirve

Genera la barra que muestra en qué paso está la persona: carrito, entrega, pago y confirmación; datos, dirección y revisión; pedido recibido, en preparación y en camino. Escribe un paso por línea, elige el actual, la dirección y los colores. Los pasos completados ganan un check y la línea entre ellos acompaña el progreso.

El código usa una lista ordenada, con aria-current="step" en el paso actual y un aviso oculto de completado para lectores de pantalla. En horizontal, en pantallas angostas, la barra muestra solo los números y el nombre del paso actual. Viene también una función irPara(n) para cambiar de paso con JavaScript.

Cómo usar

1. Escribe los pasos, uno por línea.
2. Elige el paso actual, la dirección y los colores.
3. Copia el código o descarga el HTML.

Cuándo usar

• Checkout de la tienda en línea.
• Formulario de registro por partes.
• Seguimiento de pedido.

Preguntas frecuentes

¿La barra de pasos es accesible?

Sí. Es una lista ordenada (ol), así que el lector de pantalla anuncia el número de pasos y la posición de cada uno. El paso actual lleva aria-current="step", y los completados tienen un texto oculto que dice completado.

¿Funciona en el celular?

En el modo horizontal, en pantallas angostas la barra muestra solo los números y el nombre del paso actual, para no apretar el texto. El modo vertical funciona igual en cualquier pantalla y es bueno para el seguimiento de pedidos.

¿Cómo cambiar el paso actual con JavaScript?

Cambia las clases: los pasos anteriores quedan con feito, el actual con atual y aria-current="step", y los siguientes quedan sin clase. El código generado trae una función irPara(n) que hace eso.

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares