About this Component

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

1. Drag the component onto your Framer canvas

2. Choose your background + progress bar color

3. Set counter/progress position (top, center, bottom)

4. Adjust speed if needed

5. 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.

Support

Need help setting it up? Email us at tech@oma-kase.com

Refund Policy

Due to the nature of digital products, we do not offer refunds once a purchase is made.