---
title: "Haytham Preloader 16 — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Hasan Wali · Loaders. Cinematic Counter Preloader"
canonical: "https://framer.elliotli.dev/component/haytham-preloader-16"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Haytham Preloader 16

# Haytham Preloader 16

Cinematic Counter Preloader

[View on Framer](https://framer.com/marketplace/components/haytham-preloader-16/?via=elliot-li)

![Haytham Preloader 16 preview image 1](https://framer.elliotli.dev/og/component/haytham-preloader-16/a2d8b6241859912c/1600x905.jpg)

## Summary

Cinematic Counter Preloader

## Description

**About this Component**

Create a cinematic loading experience with a rolling 0–100 odometer counter, proportional progress bar, and geometric exit transition.

Haytham Preloader turns the opening seconds of a site visit into a polished branded moment before revealing the page underneath.

**Perfect For**

Creative portfolios Agency websites Fashion and editorial sites Photography websites Architecture studios Product launches Premium landing pages

**Key Features**

Rolling 0–100 counter Linked 6:1 progress bar sizing Responsive across desktop, tablet, and mobile Adjustable counter size, position, padding, Y offset, and mask height Custom counter font and line height Custom background, bar, and track colors Adjustable animation duration Optional automatic hide Optional page scroll lock On Complete event Static Canvas/export fallback No external packages

**How It Works**

The bar fills as the counter rolls to 100. It then forms an L-shape, rotates, and scales beyond the viewport to reveal the page underneath. Bar proportions remain locked at every size for a consistent transition.

**Important Notes**

For the intended effect, place the component over the viewport and size it to cover the full screen. Stop Scroll is enabled by default and releases when the animation finishes.

**Customization Options**

Colors, bar size, counter typography, size, position, padding, Y offset, mask height, line height, duration, auto hide, scroll lock, and completion event.

**Questions?** Reach out at [hasanwali6890@gmail.com](mailto:hasanwali6890@gmail.com)

**Refund Policy**

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.

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

-   All · #8640

## Details

- **Author**: Hasan Wali
- **Price**: $12.00
- **Published**: 2026-08-20
- **Updated**: 2026-08-20
- **Added**: 2026-08-20
- **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