DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Spinner

Información visual

Objeto que indica que la sección o la página está cargando.

Spinner

Default

Descripción visual

Spinner circular animado con anillo de borde grueso, combinando color gris claro en la mayor parte y segmento azul en rotación. Dimensiones medianas (aproximadamente 40-50px de diámetro), centrado horizontalmente en contenedor rectangular blanco con borde gris claro de 1px.

Mostrar códigodel ejemplo: Default

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner(undefined) }}

Con texto para lector de pantalla

Usa un texto personalizado para lectores de pantalla en vez del texto por defecto.

Descripción visual

Spinner circular animado con anillo de borde grueso, combinando color gris claro en la mayor parte y segmento azul en rotación. Dimensiones medianas (aproximadamente 40-50px de diámetro), centrado horizontalmente en contenedor rectangular blanco con borde gris claro de 1px. Incluye texto descriptivo posicionado debajo del spinner.

Mostrar códigodel ejemplo: Con texto para lector de pantalla

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "text": "Espere por favor",
  "classes": "text-neutral-base"
}) }}

Tamaño xs

Usa las clases de tamaño de texto para dar tamaño al Spinner.

Descripción visual

Spinner circular animado de dimensiones reducidas (aproximadamente 16-20px de diámetro) con anillo de borde delgado, mostrando color gris claro en la mayoría del círculo y segmento azul en rotación. Está centrado horizontalmente dentro de contenedor rectangular con fondo blanco y borde gris claro de 1px. Texto descriptivo negro pequeño aparece en la esquina superior izquierda del contenedor.

Mostrar códigodel ejemplo: Tamaño xs

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-xs"
}) }}

Tamaño lg

Descripción visual

Spinner circular animado de tamaño mediano-grande centrado horizontalmente. Ícono de carga de color gris oscuro con animación de rotación. Fondo blanco sin bordes visibles en el contenedor.

Mostrar códigodel ejemplo: Tamaño lg

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-lg"
}) }}

Tamaño 6xl

Descripción visual

Spinner circular animado de tamaño extra grande centrado horizontalmente. Ícono de carga de color gris oscuro con animación de rotación continua. Fondo blanco sin bordes, ocupando mayor espacio vertical que proporcional al tamaño del spinner.

Mostrar códigodel ejemplo: Tamaño 6xl

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-6xl"
}) }}

Color neutral color base

Usa las clases de color de texto para dar color al Spinner.

Descripción visual

Spinner circular animado de tamaño mediano centrado horizontalmente. Ícono de carga de color gris medio con animación de rotación. Fondo blanco sin bordes visibles, con espaciado vertical equilibrado alrededor del elemento.

Mostrar códigodel ejemplo: Color neutral color base

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-neutral-base"
}) }}

Color primario

Descripción visual

Spinner circular animado con borde azul primario de grosor medio. El spinner tiene un tamaño compacto (aproximadamente 20-30px de diámetro) y presenta animación de rotación continua. Fondo transparente con el indicador de carga centrado horizontalmente en el contenedor.

Mostrar códigodel ejemplo: Color primario

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "text-primary-base"
}) }}

Establecida la anchura y altura del contenedor con clases

Usa las clases de tamaño para cambiar las dimensiones del contenedor.

Descripción visual

Spinner circular animado con borde azul primario de grosor medio. El contenedor presenta borde gris claro de 1px, padding interno visible, y título descriptivo en negro arriba del spinner. El spinner mantiene animación de rotación continua dentro de un área rectangular delimitada.

Mostrar códigodel ejemplo: Establecida la anchura y altura del contenedor con clases

Contenido

Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
  "classes": "border border-neutral-light w-60 h-60"
}) }}