Loader

Examples

Default

Secondary

Outline

Sizes

Custom Configurations

Usage

Copyimport { 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.