---
title: "PreloadPro — Framer component · Best of Framer"
description: "$8.00 · Framer component · by The Codejuring Universe · Loaders. PreloadPro Make your website's first impression unforgettable."
canonical: "https://framer.elliotli.dev/component/preloadpro"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/PreloadPro

# PreloadPro

Upgrade Your Website’s First Impression

[View on Framer](https://framer.com/marketplace/components/preloadpro/?via=elliot-li)

![PreloadPro preview image 1](https://framer.elliotli.dev/og/component/preloadpro/4a64e2039867a874/1600x1200.jpg)

## Summary

PreloadPro Make your website's first impression unforgettable.

## Description

**PreloadPro**

Make your website's first impression unforgettable. PreloadPro covers the screen with bold vertical strips, reveals animated scrolling words, then peels away strip by strip — exposing your page with a cinematic transition.

**How it works**

On page load, 4 full-height strips instantly fill the screen. Your static label appears first on the left, followed by a scrolling word ticker on the right that cycles through up to 10 custom words. Once the sequence completes, the strips exit one by one in a staggered random order (1→3→4→2), revealing your site underneath.

On mobile, the layout automatically simplifies to 2 strips — one for each text element — keeping the experience clean and fast on smaller screens.

**What you can customize**

-   Left static text and up to 10 scrolling words
    
-   Strip background color
    
-   Left text color and scrolling word accent color
    
-   Font family — choose from 10 presets including Syne, Playfair Display, DM Sans, Inter, and more, or type any custom font loaded in your project
    
-   Font weight from Light to Black
    
-   Font size independently for desktop and mobile
    
-   Divider line color and thickness between strips
    
-   Word scroll speed, strip exit stagger, and exit animation duration
    
-   On Complete event — connect it to show your page content or trigger any interaction
    

**Who is this for**

Designers and developers who want a premium loading experience on their Framer site without writing a single line of code. Works great for portfolios, agencies, product launches, and any site where first impressions matter.

**Setup**

Drop the component onto your page, set it to Fixed position, set width and height to 100%, and customize from the right panel. That's it.

## Rank history [How rankings work →](/terms#rankings)

-   All · #1780

## Details

- **Author**: The Codejuring Universe
- **Price**: $8.00
- **Published**: 2026-05-05
- **Updated**: 2026-05-05
- **Added**: 2026-03-12
- **Categories**: Loaders

## More like this

-   [Preloader Pro V4](/component/preloader-pro-v4) — Interface Studio · $12 — Your Website, Beautifully Unveiled
-   [Circleloader](/component/circleloader) — gustavwf · $5 — Circular logo reveal loader.
-   [AI Text Loading](/component/ai-text-loading) — Syauqizaidan Khairan Khalaf · $5 — Thinking phrases with a shimmer
-   [Preloader Pro V3](/component/preloader-pro-v3) — Interface Studio · $10 — Set the Stage Before the Story