Loading

Loading is a component displayed during waiting times, such as when data is being loaded.

Import

import { Loading } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Loading />

Copied!

Change Variant

Editable example

<Wrap gap="md">
  <Loading variant="oval" fontSize="3xl" color="red.500" />
  <Loading variant="grid" fontSize="3xl" color="orange.500" />
  <Loading variant="audio" fontSize="3xl" color="yellow.500" />
  <Loading variant="dots" fontSize="3xl" color="green.500" />
  <Loading variant="puff" fontSize="3xl" color="teal.500" />
  <Loading variant="rings" fontSize="3xl" color="blue.500" />
  <Loading variant="circles" fontSize="3xl" color="cyan.500" />
</Wrap>

Copied!

Change Size

Editable example

<Wrap gap="md">
  <Loading variant="oval" fontSize="lg" color="red.500" />
  <Loading variant="grid" fontSize="xl" color="orange.500" />
  <Loading variant="audio" fontSize="2xl" color="yellow.500" />
  <Loading variant="dots" fontSize="3xl" color="green.500" />
  <Loading variant="puff" fontSize="4xl" color="teal.500" />
  <Loading variant="rings" fontSize="5xl" color="blue.500" />
  <Loading variant="circles" fontSize="6xl" color="cyan.500" />
</Wrap>

Copied!

Edit this page on GitHub

PreviousAlert NextSkeleton