Solar Loader

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

1. Add SolarLoader to your canvas or frame.

2. 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).

3. 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.