---
title: Loading
description: "`Loading` is a component displayed during waiting times, such as when data is being loaded."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/loading/loading.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/loading
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-loading--basic
---

```tsx
<Loading.Oval fontSize="3xl" />
```

## Usage

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

```tsx
import { Loading } from "@/components/ui"
```

```tsx
import { Loading } from "@workspaces/ui"
```

```tsx
<Loading.Oval />
<Loading.Grid />
<Loading.Audio />
<Loading.Dots />
<Loading.Puff />
<Loading.Rings />
<Loading.Circles />
<Loading.Suspense />
```

### Change Variant

```tsx
<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

```tsx
<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

```tsx
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>
)
```

## Uses Components & Hooks

<Uses name="loading" />

## Used By Components & Hooks

<UsedBy name="loading" />

## Props

### Loading.Audio

| Prop             | Default | Type                                                                                                                                                                        | Description                                |
| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -       | `As`                                                                                                                                                                        | The HTML element to render.                |
| `asChild`        | -       | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child. |
| `css`            | -       | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                            |
| `colorScheme`    | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                |
| `duration`       | -       | `IconProps["dur"]`                                                                                                                                                          | The CSS `dur` property.                    |
| `secondaryColor` | -       | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The CSS `color` property.                  |

### Loading.Circles

| Prop             | Default | Type                                                                                                                                                                        | Description                                |
| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -       | `As`                                                                                                                                                                        | The HTML element to render.                |
| `asChild`        | -       | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child. |
| `css`            | -       | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                            |
| `colorScheme`    | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                |
| `duration`       | -       | `IconProps["dur"]`                                                                                                                                                          | The CSS `dur` property.                    |
| `secondaryColor` | -       | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The CSS `color` property.                  |

### Loading.Dots

| Prop             | Default | Type                                                                                                                                                                        | Description                                |
| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -       | `As`                                                                                                                                                                        | The HTML element to render.                |
| `asChild`        | -       | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child. |
| `css`            | -       | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                            |
| `colorScheme`    | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                |
| `duration`       | -       | `IconProps["dur"]`                                                                                                                                                          | The CSS `dur` property.                    |
| `secondaryColor` | -       | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The CSS `color` property.                  |

### Loading.Grid

| Prop             | Default | Type                                                                                                                                                                        | Description                                |
| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -       | `As`                                                                                                                                                                        | The HTML element to render.                |
| `asChild`        | -       | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child. |
| `css`            | -       | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                            |
| `colorScheme`    | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                |
| `duration`       | -       | `IconProps["dur"]`                                                                                                                                                          | The CSS `dur` property.                    |
| `secondaryColor` | -       | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The CSS `color` property.                  |

### Loading.Oval

| Prop             | Default | Type                                                                                                                                                                        | Description                                |
| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -       | `As`                                                                                                                                                                        | The HTML element to render.                |
| `asChild`        | -       | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child. |
| `css`            | -       | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                            |
| `colorScheme`    | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                |
| `duration`       | -       | `IconProps["dur"]`                                                                                                                                                          | The CSS `dur` property.                    |
| `secondaryColor` | -       | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The CSS `color` property.                  |

### Loading.Puff

| Prop             | Default | Type                                                                                                                                                                        | Description                                |
| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -       | `As`                                                                                                                                                                        | The HTML element to render.                |
| `asChild`        | -       | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child. |
| `css`            | -       | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                            |
| `colorScheme`    | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                |
| `duration`       | -       | `IconProps["dur"]`                                                                                                                                                          | The CSS `dur` property.                    |
| `secondaryColor` | -       | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The CSS `color` property.                  |

### Loading.Rings

| Prop             | Default | Type                                                                                                                                                                        | Description                                |
| ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`             | -       | `As`                                                                                                                                                                        | The HTML element to render.                |
| `asChild`        | -       | `boolean`                                                                                                                                                                   | Merges its props onto its immediate child. |
| `css`            | -       | `CSSObject \| CSSObject[]`                                                                                                                                                  | The CSS object.                            |
| `colorScheme`    | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                                                   | Set color scheme variables.                |
| `duration`       | -       | `IconProps["dur"]`                                                                                                                                                          | The CSS `dur` property.                    |
| `secondaryColor` | -       | `"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` | The CSS `color` property.                  |

### Loading.Suspense

| Prop            | Default | Type                                                                                                                      | Description                                |
| --------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`            | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`       | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`           | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme`   | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `loadingProps`  | -       | `LoadingProps`                                                                                                            | The loading props.                         |
| `loadingScheme` | -       | `LoadingScheme`                                                                                                           | The loading scheme.                        |