---
title: "Orbit Preloader — Framer component · Best of Framer"
description: "$5.00 · Framer component · by MotionIQ Studio · Loaders. Orbit Preloader isn't just a loading screen, it's a cinematic entry point for your website."
canonical: "https://framer.elliotli.dev/component/orbit-preloader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Orbit Preloader

# Orbit Preloader

Circular animated text orbit preloader

[View on Framer](https://framer.com/marketplace/components/orbit-preloader/?via=elliot-li)

![Orbit Preloader preview image 1](https://framer.elliotli.dev/og/component/orbit-preloader/6a1d5830fa164b30/1600x1200.jpg)

## Summary

Orbit Preloader isn't just a loading screen, it's a cinematic entry point for your website.

## Description

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:**

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-bq6rnl2l-oiQ3irsjVGXNeDrusc97UiIIhTWmxZ)

1.  **Visuals:**
    
    -   **Background Color:** Set the primary overlay color.
        
    -   **Colors:** Independent controls for **Text Rings** and the central **Counter**.
        
2.  Content:
    
    -   **Orbit Texts:** Add up to 8 unique strings to populate the rings.
        
    -   **Counter Labels:** Customize the **Prefix** and **Suffix** (e.g., "Loading", "%").
        
3.  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°**.
        
4.  **Typography:**
    
    -   **Ring Font Size:** Global control for orbit text scale.
        
    -   **Counter Font:** Native Framer Font picker for the central number.
        

**Set up:**

1.  Copy and paste the **Orbit Preloader** component into your project.
    
2.  Update the **Orbit Texts** array with your brand keywords or menu items.
    
3.  Match the **Background Color** to your site's theme.
    
4.  Adjust the **Loader Duration** to sync with your site's average initial load time.
    
5.  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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5107

## Details

- **Author**: MotionIQ Studio
- **Price**: $5.00
- **Published**: 2026-02-23
- **Updated**: 2026-02-26
- **Added**: 2026-02-17
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story