Orbit Preloader isn't just a loading screen, it's a cinematic entry point for your website. By combining concentric circular typography with sophisticated SVG path manipulation, it creates an immersive "breathing" effect that feels organic and premium.
Key architectural highlights:
Staggered Motion Waves: Implements complex delay logic to ensure rings ripple inward and outward in a synchronized, wave-like pattern.
Organic Randomization: Features randomized group rotation that subtly shifts the loader's orientation over time, preventing visual repetition.
Tabular-Num Precision: Uses specialized numeric formatting for the central counter to ensure rock-solid stability during rapid progression.
Features:
Concentric Breathing: 8 independent rings with distinct labels that stretch and contract for a rhythmic, alive feel.
Interactive Progress: Dynamic central counter with customizable prefix/suffix to track loading progression.
Premium Stagger Exit: Features a cinematic fade-out sequence where rings dissolve from the center out before the background clears.
Full Responsiveness: Smart scaling logic adjusts radii and font sizes across mobile, tablet, and desktop breakpoints.
Customisation Options:
Visuals:
Background Color: Set the primary overlay color.
Colors: Independent controls for Text Rings and the central Counter.
Content:
Orbit Texts: Add up to 8 unique strings to populate the rings.
Counter Labels: Customize the Prefix and Suffix (e.g., "Loading", "%").
Animation:
Durations: Separate sliders for Counter Duration (speed of count) and Loader Duration (visibility time).
Rotation: Control the intensity of the random orbit shifts via Rotation°.
Typography:
Ring Font Size: Global control for orbit text scale.
Counter Font: Native Framer Font picker for the central number.
Set up:
Copy and paste the Orbit Preloader component into your project.
Update the Orbit Texts array with your brand keywords or menu items.
Match the Background Color to your site's theme.
Adjust the Loader Duration to sync with your site's average initial load time.
Set the Counter Suffix to "%" or leave blank for a clean numeric look.
After completing your purchase, you will receive a link to the component. Copy the URL and paste it into project to import it.
MotionIQ Studio
