Preloader Orbital

Preloader Orbital

About Preloader Orbital

What is Preloader Orbital?

Preloader Orbital is a high-end, full-viewport loading animation. Featuring an intricate geometric orbit system with rotating rings, traveling particles, a circular progress arc, and a sweeping scan line, it transforms your site's first impression into a polished, branded moment. Ideal for portfolios, studios, product launches, and any site where perception of quality matters.

Core Features

  • Five curated design presets — Obsidian, Eclipse, Ember, Frost, and fully Custom — each with a complete set of tuned color tokens

  • Geometric orbital animation system with layered rings, glowing traveling dots, tick marks, corner brackets, and ambient glow effects

  • Animated progress counter with configurable suffix, loading label, and adjustable font and size

  • Logo branding support — upload a logo to display at the centre of the animation

  • Background image support with adjustable colour overlay opacity for branded loading screens

  • Smooth layered exit sequence — background fades, orbits scale out, counter blurs away

  • Visibility modes to control when the preloader appears — every visit, once per session, or first visit only

Controls inside Framer

Design

  • Design Preset

  • Show Counter

  • Counter Suffix

  • Loading Text

Branding

  • Show Logo

  • Logo Image

  • Logo Size

Background

  • Background Image

  • Overlay Opacity

Colors (Custom preset)

  • Background

  • Rings

  • Text

  • Glow

Typography

  • Font

  • Counter Size

Timing

  • Duration

  • Exit Speed

Visibility

  • Visibility Mode

Best use cases

  • Portfolio and agency sites that need a premium, cinematic first impression

  • Product and brand launch pages where controlled reveal builds anticipation

  • Studio and creative sites that want a branded, logo-forward loading experience

  • SaaS and app landing pages where perceived performance and polish drive conversions

Elevate your site's first moment. One component, zero code, instant premium.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.