SSpinner <s-spinner>

Ein animierter Indikator dafür, dass Inhalte oder eine Aktion geladen werden. SSpinner ist ein typisierter Vue-3-Wrapper für die Shopify Polaris Web Component <s-spinner>.

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

Best Practices

• Für langsamere asynchrone Vorgänge zeigen. Verwenden Sie einen Spinner, wenn etwa das Speichern eines Formulars, das Laden von Daten oder das Verarbeiten einer Aktion länger als etwa 500 ms dauert. Bei Aktionen, die sofort fertig sind, flackert ein Spinner nur und lenkt ab.
• Auf den ladenden Bereich beschränken. Platzieren Sie den Spinner in dem Teil der Seite, der lädt, etwa in einem speichernden Button oder einer Section, die ihre Daten lädt, statt die gesamte Oberfläche zu blockieren.
• Sagen, was lädt. Setzen Sie immer accessibilityLabel, zum Beispiel „Loading products“ oder „Saving changes“, damit Screenreader-Nutzer wissen, was passiert.
• Das Ergebnis anschließend melden. Sobald der Spinner verschwindet, zeigen Sie eine klare Erfolgs- oder Fehlermeldung, damit Händler wissen, dass der Vorgang abgeschlossen ist und wie er ausging.

<SSpinner accessibilityLabel="Loading products" />

Die vollständigen Richtlinien finden sich in Shopifys Best Practices für <s-spinner> (auf Englisch).

Beispiel

<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	Typ	Beschreibung
accessibilityLabel	string	Ein Label, das den Zweck oder Inhalt der Komponente für assistive Technologien wie Screenreader beschreibt. Damit lässt sich zusätzlicher Kontext bereitstellen, wenn der sichtbare Inhalt allein den Zweck der Komponente nicht klar vermittelt.
size	"base" | "large" | "large-100"	Die Größe des Lade-Spinners. - base: Standardgröße, geeignet für Inline-Ladeanzeigen oder übliche UI-Kontexte. - large: Größerer Spinner für auffälligere Ladezustände. - large-100: Sehr großer Spinner für ganzseitige oder hervorgehobene Ladezustände.