Loading
Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。
インポート
import { Loading } from "@yamada-ui/react"
使い方
編集可能な例
<Loading />
バリアントを変更する
編集可能な例
<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>
サイズを変更する
編集可能な例
<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>
GitHubでこのページを編集する