SSpinner <s-spinner>

コンテンツやアクションが読み込み中であることを示すアニメーションのインジケーター。 SSpinner は、Shopify Polaris の <s-spinner> web component 向けの型付き Vue 3 wrapper です。

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

ベストプラクティス

• 時間のかかる非同期処理で表示する。 フォームの保存、データの取得、アクションの処理などに約 500ms 以上かかる場合にスピナーを使います。すぐに終わるアクションでは、スピナーは一瞬ちらつくだけで気が散ります。
• 読み込み中の部分に限定する。 インターフェース全体をブロックするのではなく、保存中のボタンやデータを取得中のセクションなど、読み込み中のページの部分にスピナーを置きます。
• 何を読み込んでいるのかを示す。 必ず accessibilityLabel を「Loading products」や「Saving changes」のように設定し、スクリーンリーダーのユーザーが何が起きているかを把握できるようにします。
• 終わったら結果を伝える。 スピナーが消えたら、成功またはエラーのメッセージをはっきり表示し、処理が完了したことと、その結果をマーチャントに伝えます。

<SSpinner accessibilityLabel="Loading products" />

詳しいガイダンスについては、<s-spinner> に関する Shopify のベストプラクティス（英語）を参照してください。

例

<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	型	説明
accessibilityLabel	string	スクリーンリーダーなどの支援技術向けに、コンポーネントの目的や内容を説明するラベルです。表示されているコンテンツだけではコンポーネントの目的が明確に伝わらない場合に、追加のコンテキストを提供するために使用します。
size	"base" | "large" | "large-100"	ローディングスピナーのサイズです。 - base: インラインのローディングインジケーターや標準的な UI のコンテキストに適したデフォルトのサイズです。 - large: より目立つローディング状態のための大きいスピナーです。 - large-100: ページ全体のローディングや強調したいローディング状態のための特に大きいスピナーです。