Loading
Loading is a component displayed during waiting times, such as when data is being loaded.
<Loading.Oval fontSize="3xl" />
Usage
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 />
Change Variant
<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>
Change Size
<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>