---
title: "PreloadX — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Agung M · Loaders. Dynamic Loading Screen & Intro"
canonical: "https://framer.elliotli.dev/component/preloadx"
---

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

# PreloadX

Dynamic Loading Screen & Intro

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

![PreloadX preview image 1](https://framer.elliotli.dev/og/component/preloadx/31ec1e31fb34ba1e/1600x1600.jpg)

## Summary

Dynamic Loading Screen & Intro

## Description

Elevate your brand's first impression with a highly customizable, theme-driven loading screen for Framer. Features a smooth 0–100% animated counter, glassmorphism presets, brand logo integration, and fluid fade transitions.3. Key Features Breakdown

## Key Features Breakdown (Bullet Points)

-   ⚡ **Core Loading Engine & Transitions:**
    
    -   **Synced Percentage Counter:** Smooth 0% to 100% animated percentage counter synced directly with optional progress bar fills.
        
    -   **Adjustable Duration:** Configurable loading speeds ranging from 1 to 10 seconds.
        
    -   **Fluid Entry/Exit Motion:** Features automated fade-out transitions upon completion paired with fade-in and subtle scale-up effects for your main content.
        
-   🎨 **4 Pre-Built Theme System:**
    
    -   **Built-in Presets:** Instantly switch between _Light_, _Dark_, _Glass_ (glassmorphism with semi-transparent elements & backdrop blur), and _Custom_.
        
    -   **Complete Color Customization:** Fully tailorable background colors, text colors, and progress bar fill/track colors.
        
    -   **Granular Typography Control:** Separate font selectors for the percentage counter, loading subtitle text, and main content copy.
        
-   🖼 **Branding & Visual Elements:**
    
    -   **Brand Logo Integration:** Optional centered logo display positioned above the percentage counter with adjustable sizing (40px to 200px).
        
    -   **Custom Messages:** Personalize both the active loading message and the final reveal headline.
        
    -   **Bottom Progress Bar:** Sleek, padded progress indicator bar anchored at the bottom of the viewport.
        
-   ♿ **Performance & Accessibility:**
    
    -   **Accessible Image Engine:** Built-in `alt` text metadata support for logos and responsive `srcSet` loading.
        
    -   **SSR & Canvas Safe:** Optimized state handling to prevent canvas freezing and ensure zero flicker during live deployment.
        

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

-   All · #10762

## Details

- **Author**: Agung M
- **Price**: $3.00
- **Published**: 2026-07-23
- **Updated**: 2026-08-11
- **Added**: 2026-07-23
- **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