---
title: "Animated preload — Free Framer component · Best of Framer"
description: "Free Framer component · by Sophieee291 · Loaders. Cinematic animated preload for screen"
canonical: "https://framer.elliotli.dev/component/animated-preload"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Animated preload

# Animated preload

Cinematic animated preload for screen

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

![Animated preload preview image 1](https://framer.elliotli.dev/og/component/animated-preload/6ff1f914ac54df70/1600x1200.jpg)

## Summary

Cinematic animated preload for screen

## Description

A fully customizable preload animation designed to create a polished and immersive first impression. On page load, the brand logo and loading percentage appear centered on the screen in a clean, minimal layout. After a brief moment, both elements smoothly separate through space as the loading progress accelerates toward 100% before seamlessly fading into the main website experience.

**Customization**

**Logo customization**

-   Upload and replace the preload logo with your own brand asset
    
-   Supports custom brand marks, symbols, and typography logos
    
-   Adjust the spacing between the logo and loading percentage
    

**Loading direction**

-   Choose between horizontal or vertical loading layouts
    
-   Easily adapt the animation flow to match your website style
    
-   Create different visual compositions with flexible alignment options
    

**Text styling**

-   Customize the loading percentage typography
    
-   Adjust the font style to match your brand identity
    
-   Perfect for minimal, editorial, or futuristic interfaces
    

**Animation settings**

-   Control the overall preload duration
    
-   Fine-tune the timing of the split animation and fade transition
    
-   Create faster or more cinematic loading experiences depending on your design preference
    

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

-   All · #1488

## Details

- **Author**: Sophieee291
- **Published**: 2026-05-12
- **Updated**: 2026-06-10
- **Added**: 2026-05-08
- **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