---
title: "Page Preloader — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Artem Kostenko · Loaders. page preloader component that elevates your website's first impression."
canonical: "https://framer.elliotli.dev/component/page-preloader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Page Preloader

# Page Preloader

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

![Page Preloader preview image 1](https://framer.elliotli.dev/og/component/page-preloader/a15708d68420a802/1600x1200.jpg)

## Summary

page preloader component that elevates your website's first impression.

## Description

DESCRIPTION:

A professional, fully customizable page preloader component that elevates your website's first impression. Features smart color transitions where text and icons automatically change color as the progress bar passes underneath them, creating a polished, dynamic loading experience. Choose from multiple reveal animations (fade, wipe up, wipe down), customize every visual detail, and control timing with precision. Perfect for portfolios, agencies, and premium websites that demand attention to detail.

KEY FEATURES

-   Smart Color Transitions - Text and icons automatically change color as the progress bar passes underneath them
    
-   Multiple Reveal Styles - Fade, wipe down, or wipe up animations
    
-   Flexible Bar Placement - Position at top or bottom of viewport
    
-   Icon Options - Choose from clock, hourglass, timer, or none
    
-   Customizable Typography - Full control over fonts and text styling
    
-   Progress Percentage Display - Optional percentage counter
    
-   Session Memory - Option to show preloader only once per session
    
-   Performance Optimized - Smooth 60fps animations with RAF
    
-   Grain Texture Overlay - Subtle animated grain for premium feel
    
-   Border Customization - Smart borders that adapt to bar placement
    
-   Editor Preview Control - Disable in editor for easier design work
    
-   Custom Logo Support - Display your brand logo in the center
    

IMPORTANT: Make the component FIXED positioning

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

-   All · #9137

## Details

- **Author**: Artem Kostenko
- **Price**: $3.00
- **Published**: 2025-10-17
- **Updated**: 2025-10-17
- **Added**: 2025-10-09
- **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