AnimatedPreloader

Preloader with animated progress bar

Preloader – Animated Progress Bar for Framer Add a professional loading screen to your Framer project in seconds. This code component displays a smooth animated progress bar paired with a live percentage counter, giving users clear visual feedback while your site or app loads. Built for designers who care about the details — every visual element is adjustable directly from Framer's property panel. No code needed. KEY FEATURES - 6 line styles: Sharp, Pill, Dashed, Dotted, Glow, Pulse - Adjustable duration from 0.5s to 15s - Full color control: background, bar, and text independently - Adjustable bar thickness (1–12px) - Toggle percentage number and label on/off - Custom label text - onComplete event handler to trigger next actions - Fades out automatically when 100% is reached PROPERTY CONTROLS All settings are exposed in Framer's right panel — duration, colors, line style, thickness, font size, and visibility toggles. No overrides required. USE CASES - Website and app loading screens - Page transition overlays - Portfolio and agency sites - SaaS dashboards and onboarding flows COMPATIBILITY Works with any Framer project. Drag onto the canvas, resize to full screen, and configure from the panel. Connect the onComplete event to navigate to your main page or trigger an animation.

Preloader with animated progress bar