Give your Framer website a cinematic opening. The 0–100 Number Loader is a fullscreen loading screen built for Framer that displays an oversized rolling digit counter and animated progress bar before your site content appears. Designed for creative studios, freelance portfolios, agencies, product launches, and anyone who wants their Framer site to make a strong first impression from the very first second.
What it does
When a visitor lands on your page, a fullscreen loader appears instantly. A large typographic number counter climbs through two randomised intermediate values — say 34%, then 67% — before landing on 100%. The animated progress bar fills in sync along the left edge or bottom of the screen. Once the counter hits 100%, the loading animation pauses briefly then exits with a smooth directional slide or fade, revealing your page underneath.
Unlike fake timers, this Framer preloader optionally syncs to your page's actual window.load event. That means the exit only fires when your fonts, images, and assets have genuinely finished loading — so visitors never see a blank or half-loaded page underneath the loading screen.
Features
Real load sync. Toggle on Sync to Page Load and this Framer loading animation waits for your page to be truly ready. A minimum duration setting acts as a floor — on fast connections it holds for your set time; on slower connections it waits as long as needed.
Randomised counter steps. Each page visit the percentage counter animation picks different intermediate values, so the loading screen never feels mechanical or looped. Great for portfolio sites and agency website homepages where return visitors will notice the variation.
Animated progress bar. Choose between a vertical bar on the left edge — faithful to the original editorial style — or a horizontal bar along the bottom. Adjust thickness in pixels from the properties panel. The digit counter repositions automatically to keep a clean gap at any bar size, no overlap at any thickness.
Full visual control from the Framer properties panel. No code editing needed after installation. Background colour, accent colour, number colour, font family, font weight, bar position, bar thickness, exit direction, and exit timing are all exposed as native Framer property controls — colour pickers, font picker, transition editor, and number sliders. Everything a Framer code component should expose, nothing it shouldn't.
Exit transitions. Pick from slide up, slide down, slide left, slide right, or fade out. Timing and easing are controlled by Framer's native Transition property control, so you can dial in spring, tween, or custom bezier exits to match your Framer page transition without touching code.
onComplete interaction. The component fires a native Framer EventHandler the moment the exit animation finishes. Wire it to any Framer interaction — start a hero text reveal, trigger a scroll animation, unmask content, or kick off a stagger sequence. This is the missing piece most Framer preloader components skip entirely.
Mobile-ready. Uses 100dvh throughout so the intro screen fills the full viewport on iOS and Android, accounting for browser chrome like the address bar and bottom navigation. Font sizing uses calc(10vw + 10dvh) so the number counter scales beautifully from phone to ultrawide without a line of media query.
Accessibility. Built with prefers-reduced-motion support — users who have requested reduced motion in their OS settings see a simple crossfade instead of the full rolling animation. Screen readers receive a role="status" landmark so the loading screen is announced correctly.
Scroll lock. An optional toggle prevents the page from scrolling while the intro animation is active, ensuring every visitor sees the full sequence.
Who it's for
— Framer designers building portfolio sites who want a memorable creative website intro — Creative agencies adding a branded loading moment to client sites — Product studios launching new tools or landing pages — Developers using Framer who want a drop-in website preloader with real load detection — Anyone replacing a basic spinner with something typographically bold
Daniyal Habib
