A cinematic, image-driven preloading screen for Framer — built to work seamlessly with CMS collections.
Description: This pre-loader replaces the typical blank spinner or logo animation with a dynamic stack of images that shuffle and fade in sync with a live percentage counter, giving visitors something engaging to look at while your site loads. Instead of hardcoding static images, the component can pull directly from a CMS Collection, so every image in your collection (portfolio shots, product photos, project covers, etc.) can appear in the preload sequence automatically.
These are editable:
All 8 images
BG color
Percentage color
Pre-loader line color
etc....
Key Features:
Animated percentage counter (0–100%) synced to page load
Stacked/cycling image reveal with smooth crossfade or scale transitions
CMS-connected: automatically pulls images from any Collection List
Fully editable via property panel — every Image slot (Image 1–6), the Count Color, Loader Main Color, and Loader Appearance Color can be customized directly in Framer's UI, no code editing required. Swap images, recolor the counter, or restyle the loader accent in seconds.
Fully responsive, works across desktop and mobile breakpoints
Best for:
Portfolio and photography sites where visuals should shine even before the page loads
Agency/studio sites wanting a premium, high-end first impression
E-commerce or product sites that want to tease CMS product images during load
Any Framer site using a CMS Collection where you want the preloader content to update automatically as the collection grows
How it works: Connect the component's image layers to your CMS Collection field, then use the property panel to fine-tune colors (counter, loader) or manually swap individual images. Set your desired timing and the counter + image cycle handle the rest.
A cinematic, image-driven preloading screen for Framer — built to work seamlessly with CMS collections.
Description: This pre-loader replaces the typical blank spinner or logo animation with a dynamic stack of images that shuffle and fade in sync with a live percentage counter, giving visitors something engaging to look at while your site loads. Instead of hardcoding static images, the component can pull directly from a CMS Collection, so every image in your collection (portfolio shots, product photos, project covers, etc.) can appear in the preload sequence automatically.
These are editable:
All 8 images
BG color
Percentage color
Pre-loader line color
etc....
Key Features:
Animated percentage counter (0–100%) synced to page load
Stacked/cycling image reveal with smooth crossfade or scale transitions
CMS-connected: automatically pulls images from any Collection List
Fully editable via property panel — every Image slot (Image 1–6), the Count Color, Loader Main Color, and Loader Appearance Color can be customized directly in Framer's UI, no code editing required. Swap images, recolor the counter, or restyle the loader accent in seconds.
Fully responsive, works across desktop and mobile breakpoints
Best for:
Portfolio and photography sites where visuals should shine even before the page loads
Agency/studio sites wanting a premium, high-end first impression
E-commerce or product sites that want to tease CMS product images during load
Any Framer site using a CMS Collection where you want the preloader content to update automatically as the collection grows
How it works: Connect the component's image layers to your CMS Collection field, then use the property panel to fine-tune colors (counter, loader) or manually swap individual images. Set your desired timing and the counter + image cycle handle the rest.
