---
title: "0-100 Pre Loader — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Omakase Design · Loaders. 0-100 Counter Pre Loader"
canonical: "https://framer.elliotli.dev/component/0-100-pre-loader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/0-100 Pre Loader

# 0-100 Pre Loader

0-100 Counter Pre Loader

[View on Framer](https://framer.com/marketplace/components/0-100-pre-loader/?via=elliot-li)

![0-100 Pre Loader preview image 1](https://framer.elliotli.dev/og/component/0-100-pre-loader/589824ed42172dfd/1600x1200.jpg)

## Summary

0-100 Counter Pre Loader

## Description

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**](https://omakase.com/templates).

**Support**Need help setting it up? Email us at [**tech@oma-kase.com**](mailto:tech@oma-kase.com)

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #1476

## Details

- **Author**: Omakase Design
- **Price**: $4.00
- **Published**: 2026-01-30
- **Updated**: 2026-02-05
- **Added**: 2026-01-21
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story