SolarLoader transforms an ordinary loader into a mesmerizing 3D solar system experience.Each planet orbits dynamically around the glowing sun, creating a visually rich scene that blends motion design and thematic awareness — it automatically adjusts its appearance to match the user’s light or dark mode.
Perfect for modern websites, portfolios, and apps that value micro-interactions and immersive detail. Built entirely with React and CSS3D animations, no external dependencies required.
Key Features
Realistic solar system orbits with smooth rotation
Auto-detects system theme (dark/light) for adaptive visuals
Eight animated planets, each with distinct colors and sizes
Includes Saturn’s ring and orbit depth for realism
Adjustable size, speed, and background color
Optional custom text below the loader
Fully responsive and Framer-compatible
How to Use
Add SolarLoader to your canvas or frame.
Open the properties panel and configure:
Size — controls the scale of the orbits and planets.
Speed — adjusts the orbit rotation speed.
Background Color — sets the backdrop tone.
Show Text — toggle caption visibility.
Text — customize the label or hint message (supports emojis).
Preview — the loader will automatically animate and adapt to your system theme.
Customization Options
Size: Scale the planetary system from compact to large.
Speed: Control the orbit rotation speed multiplier.
Background: Choose light, dark, or custom color backgrounds.
Caption Text: Add a short note or fun phrase below the loader.
Theme Detection: Automatically switches styles between light and dark mode — no setup needed.
Perfect For
Landing pages and app preloaders
Creative studios and portfolios
Sci-fi or futuristic websites
SaaS dashboards or loading states
Pro Tip
Pair SolarLoader with a dark gradient background and subtle ambient sound for a cinematic preloader moment that feels alive and intelligent.
Launchly
