Loading
Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。
<Loading.Oval fontSize="3xl" />
使い方
import { Loading } from "@yamada-ui/react"
import { Loading } from "@/components/ui"
import { Loading } from "@workspaces/ui"
<Loading.Oval />
<Loading.Grid />
<Loading.Audio />
<Loading.Dots />
<Loading.Puff />
<Loading.Rings />
<Loading.Circles />
バリアントを変更する
<Wrap gap="md">
<Loading.Oval color="red.500" fontSize="3xl" />
<Loading.Grid color="orange.500" fontSize="3xl" />
<Loading.Audio color="yellow.500" fontSize="3xl" />
<Loading.Dots color="green.500" fontSize="3xl" />
<Loading.Puff color="teal.500" fontSize="3xl" />
<Loading.Rings color="blue.500" fontSize="3xl" />
<Loading.Circles color="cyan.500" fontSize="3xl" />
</Wrap>
サイズを変更する
<Wrap gap="md">
<Loading.Oval color="red.500" fontSize="lg" />
<Loading.Grid color="orange.500" fontSize="xl" />
<Loading.Audio color="yellow.500" fontSize="2xl" />
<Loading.Dots color="green.500" fontSize="3xl" />
<Loading.Puff color="teal.500" fontSize="4xl" />
<Loading.Rings color="blue.500" fontSize="5xl" />
<Loading.Circles color="cyan.500" fontSize="6xl" />
</Wrap>