SSpinner <s-spinner>

एक animated indicator जो बताता है कि content या कोई action load हो रहा है। SSpinner Shopify के Polaris <s-spinner> web component का typed Vue 3 wrapper है।

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

Best practices

• इसे धीमे async काम के लिए दिखाएँ। Spinner का उपयोग तब करें जब form सहेजने, data लाने या किसी action को process करने जैसे काम में लगभग 500ms से अधिक समय लगे। तुरंत पूरे होने वाले actions के लिए spinner बस झिलमिलाता है और ध्यान भटकाता है।
• इसे उसी जगह रखें जो load हो रही है। पूरे interface को रोकने के बजाय spinner को page के उस हिस्से में रखें जो load हो रहा है, जैसे save हो रहा कोई button या अपना data ला रहा कोई section।
• बताएँ कि क्या load हो रहा है। हमेशा accessibilityLabel सेट करें, उदाहरण के लिए "Loading products" या "Saving changes", ताकि screen reader उपयोगकर्ताओं को पता चले कि क्या हो रहा है।
• बाद में परिणाम बताएँ। Spinner हटने के बाद, स्पष्ट success या error संदेश दिखाएँ ताकि merchants जान सकें कि operation पूरा हो गया और उसका परिणाम क्या रहा।

<SSpinner accessibilityLabel="Loading products" />

सभी सुझावों के लिए <s-spinner> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

<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	विवरण
accessibilityLabel	string	screen readers जैसी assistive technologies के लिए component का उद्देश्य या content बताने वाला label। जब केवल दिखाई देने वाला content component का उद्देश्य स्पष्ट रूप से न बताए, तब अतिरिक्त संदर्भ देने के लिए इसका उपयोग करें।
size	"base" | "large" | "large-100"	loading spinner का आकार। - base: inline loading indicators या सामान्य UI contexts के लिए उपयुक्त डिफ़ॉल्ट आकार। - large: अधिक प्रमुख loading states के लिए बड़ा spinner। - large-100: पूरे page या ज़ोर वाली loading states के लिए बहुत बड़ा spinner।