Number Loader Pro is a premium animated percentage page loader built specifically for Framer.
It displays a bold, oversized percentage counter that animates through realistic loading steps before reaching 100%. A vertical or horizontal progress bar fills alongside the numbers, creating a polished and high-end loading experience.
The loader can sync to real page load events or simulate organic progress timing — giving you full control over performance and perception.
Built with GSAP + Framer Motion.No external setup required.Works on all pages.
Shows a large animated percentage counter
Progress bar fills in 3 dynamic steps
Can sync to real page load (window.load)
Holds at 100%
Exits with a customizable directional animation
Automatically unlocks scroll on completion
The component handles the full loading lifecycle automatically.
Number Loader Pro — Setup Guide
Click the Copy Component button and paste it onto your Framer canvas.
Framer will automatically import it into your Assets panel.
Place the Number Loader at the top level of your page.
It automatically positions itself as a full-screen fixed overlay.
No manual positioning required.
If you want the loader to appear on multiple pages, paste it onto each page individually.
You can keep identical settings across pages for consistency.
Enable Sync to Page Load if you want the number loader to wait until all assets are fully loaded.
ON → waits for real load event
OFF → simulates smooth organic loading
Minimum Duration always acts as a timing floor.
Background color
Accent / progress bar color
Number color
Full font control (family, weight, style)
Minimum duration
Hold at 100% timing
Exit transition (custom tween)
Exit direction (Up, Down, Left, Right, Fade)
Progress bar position (Left or Bottom)
Progress bar thickness
Scroll locking option
Real page load sync
You have full control over timing, layout, and motion feel.
Choose how the loader leaves the screen:
Slide Up
Slide Down
Slide Left
Slide Right
Fade Out
The exit uses a smooth cinematic easing curve by default but can be fully customized via Framer’s transition control.
Respects reduced motion preferences
Locks scroll while active (optional)
Dispatches a loaderComplete event
Cleans up animations automatically
Works across screen sizes (uses 100dvh)
Responsive typography scaling
Portfolio websites
Agency sites
Product launches
High-end landing pages
Branding-heavy experiences
If you want a bold, cinematic number loader for Framer with a realistic percentage counter and smooth exit animation — Number Loader Pro delivers a premium first impression.
Daniyal Habib
