AnimatedPreloader
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.
Viper Guy
