コンポーネント

スピナー

アニメーション付きのローディングインジケーターを表示します。

<Spinner />

APIリファレンス

このコンポーネントはspan要素に基づいており、共通のマージンプロパティをサポートします。

プロパティデフォルト
size
レスポンシブ<"1" | "2" | "3">
"2"
loading
boolean
true

サイズ

sizeプロパティを使用して、スピナーのサイズを制御します。

<Flex align="center" gap="4">
<Spinner size="1" />
<Spinner size="2" />
<Spinner size="3" />
</Flex>

子要素を持つ場合

loadingプロパティを使用して、スピナーまたはその子要素を表示するかどうかを制御します。スピナーは、子要素が非表示になっているときにその寸法を保持し、インタラクティブ要素を無効にします。

<Flex gap="4">
<Spinner loading={true}>
<Switch defaultChecked />
</Spinner>
<Spinner loading={false}>
<Switch defaultChecked />
</Spinner>
</Flex>

ボタンを使用する場合

ボタンには、スピナーを自動的に構成する独自のloadingプロパティがあります。

<Button loading>Bookmark</Button>

ボタン内にアイコンがある場合は、ボタンのdisabled状態を使用し、アイコンをスタンドアロンの<Spinner>でラップして、より洗練されたデザインを実現できます。

<Button disabled>
<Spinner loading>
<BookmarkIcon />
</Spinner>
Bookmark
</Button>