║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Loader description: A customizable loading indicator with bouncing squares. 🔄 lastUpdated: 20 Aug, 2025 links: source: https://github.com/Logging-Stuff/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:

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

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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║