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 />
<Loading.Suspense />
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>
Use Suspense
const SuspendButton = ({ children }: { children: React.ReactNode }) => {
const [suspend, setSuspend] = useState(false)
if (suspend) {
throw new Promise((resolve) => {
setTimeout(() => {
setSuspend(false)
resolve()
}, 2000)
})
}
return (
<Button onClick={() => setSuspend(true)} w="full">
{children}
</Button>
)
}
return (
<Wrap gap="sm">
<For
each={Object.entries({
oval: "red.500",
grid: "orange.500",
audio: "yellow.500",
dots: "green.500",
puff: "teal.500",
rings: "blue.500",
circles: "cyan.500",
})}
>
{([loadingScheme, color]) => (
<Box key={loadingScheme} w="20" h="10">
<Loading.Suspense
loadingScheme={loadingScheme}
loadingProps={{ fontSize: "2xl", color }}
>
<SuspendButton>{loadingScheme}</SuspendButton>
</Loading.Suspense>
</Box>
)}
</For>
</Wrap>
)
"use client" to the top of the file.Props
Similar Components
CircleProgress
CircleProgress is a component that displays progress in a circular progress bar.
Progress
Progress is a component for visually indicating progress.
Skeleton
Skeleton is a component that acts as a placeholder until content is loaded.
Tip
Tip is a component that displays supplementary information with a built-in icon trigger.
Uses Components & Hooks
Icon
Icon is a general icon component that can be used in your projects.
Motion
Motion is a convenient component that extends the Yamada UI Style Props to Motion.
Text
Text is a component that represents a paragraph of text. By default, it renders a p element.
Portal
Portal is a component that renders elements outside of the current DOM hierarchy.
Center
Center is a component that aligns the child elements in the center within the component.