Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Spinner
Spinner
Un spinner es un indicador visual de que un proceso está ocurriendo en segundo plano pero que la interfaz aún no está lista para su interacción.
Usos
Se utilizan cuando la información tarda mucho tiempo en procesarse y aparecer en pantalla para recuperar datos o realizar cálculos lentos, y ayudan a notificar a los usuarios que la carga está en curso. Aunque no brinda detalles sobre lo que está ocurriendo en el back-end, asegura al usuario que su acción está siendo procesada. En su versión Big, la acción desactiva temporalmente toda la aplicación ya que se están guardando-enviando datos del usuario. En su versión Small puede ser específica para una zona concreta de la web y no desactivar el resto de funcionalidades.
Cuando usar
Cuando ya te encuentras en una pantalla y has solicitado una acción o proceso.
Cuando la información tarda mucho tiempo en procesarse y aparecer en pantalla.
Cuando se prevee que el tiempo de espera será superior a tres segundos.
Para cargas puntuales.
Si se quiere notificar al usuario que una acción está en curso y debe esperar a que finalice.
Al recuperar o actualizar pequeñas cantidades de datos.
Comportamiento
Tipos
Indeterminate
Determinated
Tamaño
Big
Small
Contenido
Basic
Title + Description
Title
Description
Fondo
Overlay Modal
White
Accesibilidad
Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.
Spinner es un elemento personalizado con un indicador de carga animado en su interior.
Para comunicar al usuario el estado de carga, utiliza el atributo aria-live.
El componente progress bar tiene role="progressbar"
Tiene la propiedad aria-valuenow fijada en un valor decimal entre aria-valuemin y aria-valuemax que representa el valor actual del contador. Las tecnologías de asistencia presentaran aria-valuenow como un porcentaje.
Tiene la propiedad aria-valuemin establecida en un valor decimal inferior a aria-valuemax.
Tiene la propiedad aria-valuemax ajustada a un valor decimal mayor que aria-valuemin.
Como el progress bar tiene una etiqueta visible, se hace referencia a ella mediante aria-labelledby en el elemento con rol="progressbar".
Mientras el elemento spinner esta cargando tiene la propiedad aria-busy fijada en true. Esta indica que se está modificando un elemento y que las tecnologías de asistencia pueden querer esperar hasta que se completen los cambios antes de informar al usuario sobre la actualización.
Tiene tabindex="0" para hacer posible acceder a él usando la tecla de tabulación o mover el foco mediante programación.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
