Components
Loading preview...
The SolarLoader is a visually stunning, interactive React loader that simulates a miniature 3D solar system. At its center is a glowing sun, surrounded by planets orbiting in realistic, circular paths, each rendered as a 3D spherical body with subtle shading, inner shadows, and reflection spots for a lifelike effect. The loader automatically adapts to dark and light themes, ensuring it fits seamlessly into any UI. A diagonal axis line passes just below the sun, visually connecting the orbits and adding depth and structure to the system. All orbits rotate smoothly using CSS animations, while the entire system features a gentle tilt and perspective to enhance the 3D illusion. Planets like Saturn include rings with gradient styling, and each orbit has configurable speed and size. This loader not only indicates loading activity but also serves as an engaging, futuristic visual centerpiece for applications, dashboards, or landing pages.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/solar-loader"use client";
import React from "react";
import SolarLoader from "@/components/ui/solar-loader";
const SolarLoaderDemo = () => {
return (
<div className="flex flex-col items-center justify-center p-10">
<SolarLoader size={40} speed={1} />
<p className="mt-6 text-center text-sm opacity-80">
Auto adapts to your system theme and configure 🌙☀️
</p>
</div>
);
};
export default SolarLoaderDemo;