SSpinner <s-spinner>

Un indicateur animé signalant qu'un contenu ou une action est en cours de chargement. SSpinner est le wrapper Vue 3 typé du web component <s-spinner> de Shopify Polaris.

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

Bonnes pratiques

• Affichez-le pour les opérations asynchrones plus lentes. Utilisez un spinner lorsqu'une opération comme l'enregistrement d'un formulaire, la récupération de données ou le traitement d'une action prend plus d'environ 500 ms. Pour les actions instantanées, un spinner ne fait que clignoter et distraire.
• Limitez-le à ce qui charge. Placez le spinner dans la partie de la page en cours de chargement, comme un bouton en train d'enregistrer ou une section qui récupère ses données, plutôt que de bloquer toute l'interface.
• Indiquez ce qui charge. Définissez toujours accessibilityLabel, par exemple "Loading products" ou "Saving changes", pour que les utilisateurs de lecteur d'écran sachent ce qui se passe.
• Communiquez le résultat ensuite. Une fois le spinner disparu, affichez un message clair de réussite ou d'erreur pour que les marchands sachent que l'opération est terminée et comment elle s'est déroulée.

<SSpinner accessibilityLabel="Loading products" />

Consultez les bonnes pratiques de Shopify pour <s-spinner> (en anglais) pour l'ensemble des recommandations.

Exemple

<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	Type	Description
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu du composant pour les technologies d'assistance comme les lecteurs d'écran. Utilisez-le pour apporter un contexte supplémentaire lorsque le contenu visible seul ne suffit pas à exprimer clairement l'objectif du composant.
size	"base" | "large" | "large-100"	La taille du spinner de chargement. - base : taille par défaut adaptée aux indicateurs de chargement inline ou aux contextes d'interface standard. - large : spinner plus grand pour des états de chargement plus visibles. - large-100 : très grand spinner pour les états de chargement pleine page ou mis en avant.