Loader

// Code for loader/basic

Installation

Usage

import { Loader } from "@/components/pluto-ui/loader"

Basic

The simplest usage with default values:

<Loader />

Custom Text

Change the text displayed:

<Loader text="Loading" />

Custom Size

Adjust the loader size:

<Loader size={200} />

Custom Duration

Change the animation speed:

<Loader duration={3} />

Props

Examples

Basic

The default loader with "Generating" text:

// Code for loader/basic

Custom

Multiple loaders with different configurations:

// Code for loader/custom

Minimal

A smaller, more compact version:

// Code for loader/minimal

Custom Colors

Loaders with custom color schemes:

// Code for loader/custom-colors

Features

• Rotating Gradient Shadows: A circular loader with animated gradient box-shadows that rotate continuously
• Wave Animation: Letters animate with a wave effect, each with a staggered delay
• Smooth Animations: Pure CSS keyframes for hardware-accelerated performance
• Theme Support: Automatically adapts to light/dark themes using shadcn CSS variables
• Customizable: Full control over text, size, and animation duration
• Accessible: Respects prefers-reduced-motion for users who prefer reduced animations

How It Works

The component consists of two main animated elements:

1. Rotating Loader Circle: A circular element with gradient box-shadows that rotate 360 degrees, creating a dynamic glow effect
2. Animated Letters: Each letter in the text animates with a wave effect:
   • Starts at 40% opacity
   • Scales to 1.15x and reaches full opacity at 20% of the animation
   • Returns to normal size with 70% opacity at 40%
   • Each letter has a 0.1s delay from the previous one

The loader uses shadcn CSS variables:

• var(--foreground) for text color
• var(--primary) for the main gradient colors
• var(--destructive) for accent colors in the middle of the rotation

Customization

Custom Text and Size

<Loader text="Processing" size={200} />

Custom Animation Speed

Make the animation faster or slower:

<Loader duration={1.5} /> {/* Faster */}
<Loader duration={4} />   {/* Slower */}

Custom Colors

Use custom colors with shadcn CSS variables or any valid CSS color:

<Loader 
  text="Loading" 
  primaryColor="var(--primary)" 
  accentColor="var(--destructive)"
  textColor="var(--foreground)"
/>

Or use custom HSL/hex colors:

<Loader 
  text="Processing" 
  primaryColor="hsl(142, 76%, 36%)"
  accentColor="hsl(142, 71%, 45%)"
  textColor="hsl(142, 76%, 36%)"
/>

Custom Styling

Add custom classes for additional styling:

<Loader className="shadow-lg" />

Styling

The component uses shadcn CSS variables for all colors, ensuring seamless theme integration:

• Text Color: var(--foreground)
• Primary Gradient: var(--primary) with varying opacity
• Accent Color: var(--destructive) for the middle rotation state

All colors automatically adapt to light/dark mode through your theme configuration.

Browser Support

This component uses:

• CSS keyframes (supported in all modern browsers)
• CSS color-mix() for opacity (supported in modern browsers)
• CSS transforms and box-shadows

The component works in all modern browsers:

• Chrome 111+
• Firefox 113+
• Safari 16.4+
• Edge 111+

Notes

• The component dynamically injects CSS keyframes without requiring a separate CSS file
• All animations use pure CSS for optimal performance
• The loader is fully responsive and can be used in any layout
• Colors respect prefers-color-scheme through shadcn variables
• The component uses color-mix() for opacity, which may require a modern browser