About 3D Ring Preloader

3D Ring Preloader, a loading screen that becomes your hero, for Framer. A 3D ring of your work counts up while the page loads, then closes into a stack and opens into your full-screen hero picture or video.

What you get

- A Framer component with a ring of up to 16 pictures, dealt out of one stack while loading

- A rolling counter that follows real loading, so the ring and the number finish together

- A full-screen hero image, or a hero video that plays muted and loops

- Settings for Brand, Font, Loader, Text and Background colours, Corners and Play (Once, Every Load or Off)

- 16 demo pictures and a demo hero included, with plain CSS 3D, no WebGL and no extra libraries

Good for

Portfolios, design and creative studios, photographers, agencies and personal sites.

Good to know

- Framer's editor shows the finished hero. The loader plays in Preview and on the published site.

- Paste it inside your page, set it to Fill width and 100vh, and give your own headline an Appear delay of about 4.5 seconds so it arrives after the loader.

- On phones, set a smaller counter size in your phone breakpoint.