Loading...
Installation
Usage
import SolarLoader from "@/components/ruixen/solar-loader";
export default function App() {
return (
<div className="flex items-center justify-center min-h-screen">
<SolarLoader size={100} speed={1} />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 80 | Size of the solar system in pixels |
speed | number | 1 | Animation speed multiplier |
className | string | - | Additional CSS classes |
Features
- Solar System Animation: Central sun with orbiting planets
- Customizable Size: Adjustable loader dimensions
- Variable Speed: Control animation speed
- Smooth Rotation: CSS-based smooth animations
- Responsive: Scales with container size
- Lightweight: Pure CSS animations, no JavaScript
Animation Details
- Sun: Central golden orb with subtle glow
- Inner Planet: Fast orbit, small size
- Outer Planet: Slower orbit, larger size
- Orbital Paths: Visible dotted orbit lines
Customization
You can customize the appearance:
// Large, slow loader
<SolarLoader size={150} speed={0.5} />
// Small, fast loader
<SolarLoader size={60} speed={2} />
// Custom styling
<SolarLoader
size={100}
className="opacity-75"
/>Use Cases
Perfect for:
- Loading Screens: App initialization
- Data Processing: Long-running operations
- Space-themed Apps: Astronomy or science apps
- Creative Interfaces: Unique loading experience
- Dashboard Loading: System status indicators