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

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

## 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...` | 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.                        |