Globe Loader

Globe Loader is a two-in-one loading component that packs a full interactive globe and a geometric dot-sphere into the same file.

Globe Loader is a two-in-one loading component that packs a full interactive globe and a geometric dot-sphere into the same file. Toggle between modes from the properties panel without swapping components. Features Globe mode: real country outlines on an orthographic projection with drag-to-rotate physics, inertia, and cursor-follow tilt Dot Sphere mode: ~500 depth-shaded dots on a lat/long grid with a gentle breathing pulse Three animated SVG rings with dash-drift and hover slowdown Spark diamonds and tick markers for extra mechanical detail Responsive to any square or rectangular frame Marketplace-safe: static-render fallback, viewport pause, tab pause, no runtime CDN imports What you can customise Colors are exposed flat at the top so you can bind each one to a Framer Color Style for instant theming: Background - stage color behind the loader Land / Borders - fill and stroke for globe landmasses Back Dots / Front Dots - depth-gradient extremes for dot sphere Grouped controls: Motion - spin speed, hover speed, and tilt for globe; speed and breathing for dot sphere Interaction - drag, cursor follow, and sensitivity (globe only) Dot Interaction - drag-to-spin, cursor-follow tilt, and sensitivity (dot sphere only) Globe - disc width, land opacity, grid lines, and vignette Outer / Mid / Inner Ring - radius, dash pattern, period, and direction Ticks - cardinal tick marks on the mid ring Sparks - tiny diamonds that orbit the inner edge Hover Hint - dashed guide ring that fades in on hover Sphere - dot size, latitude bands, and base radius (dot sphere only) Performance - frame-rate cap to save battery (dot sphere only) How to use Drop the component onto your canvas. Choose Globe or Dot Sphere from the Mode control. Resize the frame to fit your layout. Tweak colors and motion to match your palette. Lower the FPS cap if you need to reduce CPU use. Tips Pair dark land with a warm off-white background for the signature premium look. Enable the grid in globe mode for a technical, data-visualisation feel. The component is fully self-contained: no external images, fonts, or data to load. Refund Policy: All sales are final. No refunds. Free email support: framer@muhmad.me More Components: sbarah.com Thanks 🎉🌵

Dual-mode loader: globe + dot sphere.