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
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.
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
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.
Hasan Wali
