Spinner

Tipos de spinner

Expandible

Mediante la clase "spinner-block", el componente toma como referencia el 100% del ancho del contenedor donde se encuentre y, automáticamente, el mismo valor para su alto sin perder calidad y manteniendo la misma proporción de su diseño.

Tamaños

Grande

Mediano

Chico

Diseño y estructura (contexto de uso)

Spinner con mensaje

Este componente puede ir acompañado de un mensaje claro que ayude a las personas usuarias a comprender correctamente el contexto de carga del mismo.

Cargando...

Spinner en otros componentes

El spinner puede utilizarse en diferentes situaciones siempre y cuando refleje la carga de información en relación al contexto de uso.

Usabilidad

Buenas prácticas

Considerar el uso de un spinner si el tiempo de espera será superior a tres segundos para asegurarle a la persona usuaria que su acción se está procesando.

Utilizar hasta cuatro palabras para el mensaje opcional que acompaña al spinner.

Malas prácticas

No utilizar el spinner para comunicar el avance de un proceso de varios pasos. Para eso, utilice una barra de progreso.