---
title: Loader
description: A customizable loading indicator with bouncing squares. 🔄
lastUpdated: 20 Aug, 2025
links:
  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/Loader.tsx
---

<ComponentShowcase name="loader-style-default" />
<br />
<br />

<ComponentInstall>
  <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/loader" />
  <ComponentInstall.Manual>
#### 1. Install dependencies:

```sh
npm install class-variance-authority
```

<br />

#### 2. Copy the code 👇 into your project:

<ComponentSource name="loader" />

  </ComponentInstall.Manual>
</ComponentInstall>

<br />
<br />

## Examples

### Default

<ComponentShowcase name="loader-style-default" />
<br />
<br />

### Secondary

<ComponentShowcase name="loader-style-solid" />
<br />
<br />

### Outline

<ComponentShowcase name="loader-style-outline" />
<br />
<br />

### Sizes

<ComponentShowcase name="loader-style-sizes" />
<br />
<br />

### Custom Configurations

<ComponentShowcase name="loader-style-custom" />
<br />
<br />

## Usage

```tsx
import { Loader } from "@/components/ui/loader"

// Default
<Loader />

// With variants
<Loader variant="secondary" size="lg" />

// Custom configuration
<Loader
  count={4}           // Number of squares
  duration={1.2}      // Animation duration in seconds
  delayStep={120}     // Delay between squares in milliseconds
/>

// Fully customized
<Loader
  variant="secondary"
  size="lg"
  count={4}
  duration={1.2}
  delayStep={120}
  className="my-4"
/>
```

## Props

- - `variant`

  * Type: `default` | `secondary` | `outline`
  * Default: `default`
  * Description: Defines the style variant for the component

- - `size`

  * Type: `sm` | `md` | `lg`
  * Default: `md`
  * Description: Controls the size of the loader squares

- - `count`

  * Type: `number`
  * Default: `3`
  * Description: Sets the number of bouncing squares

- - `duration`

  * Type: `number`
  * Default: `0.5`
  * Description: Controls the animation duration in seconds

- - `delayStep`

  * Type: `number`
  * Default: `100`
  * Description: Defines the delay between squares in milliseconds

- - `className`

  * Type: `string`
  * Default: `undefined`
  * Description: Allows for adding additional CSS classes for custom styling

- - `asChild`
  * Type: `boolean`
  * Default: `false`
  * Description: When `true`, merges the component's props onto its immediate child element

## Accessibility

The Loader component includes the following attributes:

- `role="status"`
- `aria-label="Loading..."`

This ensures screen readers can properly announce the loading state to users.