Add the component to the top of your Layers panel so it sits above everything else.
Set the component width to 100% and height to 100vh.
Lock the component layer so you can safely work on items underneath without accidentally selecting the loader.
Test with the layer unlocked briefly to confirm visual alignment, then lock again for design work.
Tip: in Framer you can lock a layer by selecting it and clicking the padlock icon or right clicking the layer and choosing Lock.
Clean brand reveal that boosts perceived polish and trust.
Easy to configure for any brand with color, background, timing, and logo options.
Works with SVG and raster logos with optional original SVG color preservation.
Non-intrusive handling of scroll and pointer events while the loader is active.
Sanitizes and caches SVGs for safer and faster repeat loads.
text1 — Primary headline shown first, default "Hold tight"
text2 — Secondary headline shown second, default "Hang in there"
logo — URL or uploaded image file (svg, png, jpg, webp, gif)
logoWidthEm — Logo width in em units, default 17.5
preserveSvgColors — Keep original SVG colors when true
color — Accent color for logo and progress bar
backgroundColor — Full-screen background color
duration — Animation length in seconds
Recommended defaults: duration 2 to 4 seconds, logoWidthEm 10 to 20 for most logos.
Renders a fixed, full-viewport wrapper that locks scrolling and intercepts pointer events while active.
Injects two identical logo layers, one faded and one clipped, to create a smooth reveal effect.
Animates the top layer clip-path while the progress bar scales and the two text lines animate in sequence.
Cleans up any injected nodes and restores interaction once the animation completes.
Brand splash for product launches and marketing campaigns.
Transition screen between routes or during heavy data fetches.
Product silhouette reveal for feature pages.
Seasonal or campaign variants by toggling SVG colors and background.
A/B test text and timing to improve engagement.
Daniyal Habib
