desy-html

Spinner

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.

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