SSpinner <s-spinner>

Um indicador animado de que um conteúdo ou uma ação está carregando. SSpinner é o wrapper de Vue 3 tipado do web component <s-spinner> do Shopify Polaris.

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

Boas práticas

• Mostre para trabalhos assíncronos mais lentos. Use um spinner quando algo como salvar um formulário, buscar dados ou processar uma ação levar mais de cerca de 500ms. Para ações que terminam instantaneamente, um spinner só pisca e distrai.
• Mantenha-o junto ao que está carregando. Coloque o spinner na parte da página que está carregando, como um botão que está salvando ou uma seção buscando seus dados, em vez de bloquear a interface inteira.
• Diga o que está carregando. Sempre defina accessibilityLabel, por exemplo "Carregando produtos" ou "Salvando alterações", para que os usuários de leitores de tela saibam o que está acontecendo.
• Informe o resultado depois. Quando o spinner desaparecer, mostre uma mensagem clara de sucesso ou de erro para que os lojistas saibam que a operação terminou e como ela correu.

<SSpinner accessibilityLabel="Loading products" />

Veja as boas práticas da Shopify para <s-spinner> (em inglês) para todas as recomendações.

Exemplo

<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	Descrição
accessibilityLabel	string	Um rótulo que descreve a finalidade ou o conteúdo do componente para tecnologias assistivas, como leitores de tela. Use-o para fornecer contexto adicional quando o conteúdo visível sozinho não transmite com clareza a finalidade do componente.
size	"base" | "large" | "large-100"	O tamanho do spinner de carregamento. - base: tamanho padrão adequado para indicadores de carregamento em linha ou contextos de interface comuns. - large: spinner maior para estados de carregamento mais destacados. - large-100: spinner extra grande para estados de carregamento de página inteira ou em destaque.