DESY

Sistema de Diseño del Gobierno de Aragón.

Spinner

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

Spinner

Mostrar parámetros

Parámetros del componente

              params:
- name: text
  type: string
  required: false
  description: Text for screenreaders.
- name: classes
  type: string
  required: false
  description: Classes to add to the spinner component.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the spinner component.
              
            

Default

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.

Espere por favor
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.

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

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

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.

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

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.

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"
}) }}