Pre Loader

Image Stack Pre-loader

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.