About this Component
Create a cinematic loading experience with a rotating geometric shape that morphs from a square into a rectangle before expanding into a full-frame reveal.
Haytham Shape Loader combines a simulated progress bar, bouncy edge-to-edge rotation, responsive morphing, and a polished final expansion. Customize colors, sizes, corner radii, timing, rotation, progress styling, start behavior, and layering directly in Framer.
An optional component-scoped Scroll Stopper temporarily stops wheel and touch scrolling over the component while the animation plays, then restores scrolling after the reveal. It does not modify the page body, document scroll state, or use global scroll listeners.
Perfect For
Creative portfolios Agency websites Fashion and editorial sites Photography portfolios Product launches Landing pages Premium brand experiences
Key Features
Rotating square loader Square-to-rectangle morph Full-frame expansion reveal Animated progress bar Responsive sizing Custom colors and radii Adjustable timing and bounce In-view or on-mount start Component-scoped Scroll Stopper Optional click blocking Automatic cleanup Static Canvas/export preview Organized property controls No code required
How It Works
Place the component inside the area you want it to cover. For fullscreen use, size the Framer layer to fill the viewport. Customize the animation from the Property Controls and preview the result.
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.
