Índice de páginas
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) }}HTML
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
</span>
<!-- /spinner -->
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"
}) }}HTML
<!-- spinner -->
<span class="c-spinner text-neutral-base" data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Espere por favor
</span>
</span>
<!-- /spinner -->
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"
}) }}HTML
<!-- spinner -->
<span class="c-spinner text-xs" data-module="c-spinner">
</span>
<!-- /spinner -->
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"
}) }}HTML
<!-- spinner -->
<span class="c-spinner text-lg" data-module="c-spinner">
</span>
<!-- /spinner -->
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"
}) }}HTML
<!-- spinner -->
<span class="c-spinner text-6xl" data-module="c-spinner">
</span>
<!-- /spinner -->
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"
}) }}HTML
<!-- spinner -->
<span class="c-spinner text-neutral-base" data-module="c-spinner">
</span>
<!-- /spinner -->
Color primario #
Mostrar códigodel ejemplo: Color primario
Contenido
Nunjucks macro
{% from "components/spinner/_macro.spinner.njk" import componentSpinner %}
{{ componentSpinner({
"classes": "text-primary-base"
}) }}HTML
<!-- spinner -->
<span class="c-spinner text-primary-base" data-module="c-spinner">
</span>
<!-- /spinner -->
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"
}) }}HTML
<!-- spinner -->
<span class="c-spinner border border-neutral-light w-60 h-60" data-module="c-spinner">
</span>
<!-- /spinner -->