SSpinner <s-spinner>

Un indicador animado de que un contenido o una acción se está cargando. SSpinner es el wrapper de Vue 3 tipado del web component <s-spinner> de Shopify Polaris.

import { SSpinner } from 'polaris-vue-elements'

Buenas prácticas

• Muéstralo para operaciones asíncronas más lentas. Usa un spinner cuando algo como guardar un formulario, obtener datos o procesar una acción tarde más de unos 500 ms. En acciones que terminan al instante, un spinner solo parpadea y distrae.
• Mantenlo junto a lo que se está cargando. Coloca el spinner en la parte de la página que se está cargando, como un botón que está guardando o una sección que obtiene sus datos, en lugar de bloquear toda la interfaz.
• Indica qué se está cargando. Define siempre accessibilityLabel, por ejemplo "Loading products" o "Saving changes", para que los usuarios de lectores de pantalla sepan qué está pasando.
• Comunica el resultado después. Cuando desaparezca el spinner, muestra un mensaje claro de éxito o de error para que los comerciantes sepan que la operación terminó y cómo salió.

<SSpinner accessibilityLabel="Loading products" />

Consulta las buenas prácticas de Shopify para <s-spinner> (en inglés) para ver todas las recomendaciones.

Ejemplo

<script setup>
import { SSpinner } from 'polaris-vue-elements'
</script>

<template>
  <SSpinner accessibilityLabel="Loading, small" size="base" />
  <SSpinner accessibilityLabel="Loading, large" size="large" />
  <SSpinner accessibilityLabel="Loading, extra large" size="large-100" />
</template>

Props

Prop	Tipo	Descripción
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del componente para tecnologías de asistencia como los lectores de pantalla. Úsala para aportar contexto adicional cuando el contenido visible por sí solo no transmite con claridad el propósito del componente.
size	"base" | "large" | "large-100"	El tamaño del indicador de carga. - base: tamaño predeterminado adecuado para indicadores de carga en línea o contextos de interfaz estándar. - large: indicador más grande para estados de carga más destacados. - large-100: indicador extra grande para estados de carga a página completa o destacados.