About Diagonal Preloader
Make a memorable first impression with Diagonal Fill Preloader — an animated loading screen for Framer.
Featuring a distinctive diagonal fill animation and a real-time percentage counter, this preloader creates a smooth and engaging transition before visitors enter your website.
The animation progresses through 101 carefully crafted visual states, gradually revealing the screen through a dynamic diagonal pattern. Once loading reaches 100%, the preloader pauses briefly and smoothly slides upward to reveal your page.
Designed to be both visually striking and easy to customize, it adds a polished finishing touch to any website without requiring additional coding.
Customization
Animation
Adjustable animation duration (0.5–4.4 seconds).
Smooth, linear progress animation.
101 animation states for detailed visual progression.
Automatic transition after reaching 100%.
Custom exit animation timing built into the component.
Colors & Typography
Customizable primary color.
Customizable secondary color.
Adjustable counter font family.
Customizable font weight and style.
Adjustable counter font size.
Responsive scaling to fit different container dimensions.
Responsive Design
Automatically adapts to container dimensions.
Scales the diagonal animation geometry to fit the available space.
Responsive percentage counter positioning.
Great For
Creative agency websites.
Portfolio websites.
Luxury and editorial websites.
Interactive landing pages.
Product and brand showcases.
Experimental web design.
Websites that need a memorable loading experience.
Refund Policy
Due to the digital nature of this product, all sales are final and refunds will not be issued.
Questions & Support
Have questions or need help setting up the component?
Feel free to reach out:
