Transform your site's loading experience with this sleek, professional preloader inspired by GSAP-style animations. It ships with a smooth counter + synced progress bar, so your site feels premium from the first second.
Key Features
Animated counter that slides from 00 → 99 with smooth transitions
Synced progress bar that matches the counter percentage
Fully customizable typography using Framer Font controls
Adjustable animation speed (0.5x – 2x)
Toggle counter and progress bar independently
Customizable positions (top / center / bottom)
Auto-plays on page load
Smooth fade-out when complete
Zero configuration needed, works out of the box
Perfect For
Portfolio sites
Agency websites
Product launches
Marketing pages
Premium presentations
Any site that needs a polished loading experience
What You Get (After Purchase)
0–100 Pre Loader Component URL
Coupon for 25% off on yearly Pro plan
Lifetime Email Support
Quick Setup
Drag the component onto your Framer canvas
Choose your background + progress bar color
Set counter/progress position (top, center, bottom)
Adjust speed if needed
Publish ✅
Customization Options✓ Background color✓ Progress bar color, height, and position✓ Counter color, font, and position✓ Animation speed multiplier✓ Show/hide counter or progress bar
How It Works
On load, the counter slides upward while incrementing from 00 to 99
The progress bar fills in sync with the same percentage
Once complete, the preloader fades out smoothly
It then removes itself from the DOM so it won’t interfere with anything
Technical Details
Built with Framer Motion (no external dependencies)
Hardware-accelerated for smooth performance
Responsive layout using viewport units
Properly removed from the tab order after completion (no accessibility issues)
Pro Tips
Match the background to your page for a clean transition
Use a bold font weight for the counter for a high-end feel
Keep progress bar height subtle for a modern look
Speed up animations for marketing pages, slow it down for premium portfolios
Need Complete Site Templates?If you like this kind of clean, premium interaction, you’ll find more templates and components at https://omakase.com/templates.
SupportNeed help setting it up? Email us at tech@oma-kase.com
Refund PolicyDue to the nature of digital products, we do not offer refunds once a purchase is made.
Omakase
