---
title: "Venetian Preloader — Free Framer component · Best of Framer"
description: "Free Framer component · by 7th Muse · Loaders. Venetian Preloader is a sleek, customizable loading animation component that adds cinematic polish to your website or app."
canonical: "https://framer.elliotli.dev/component/venetian-preloader"
---

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

# Venetian Preloader

An interactive pre-loader component.

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

![Venetian Preloader preview image 1](https://framer.elliotli.dev/og/component/venetian-preloader/73652d0777cb0728/1600x1200.jpg)

## Summary

Venetian Preloader is a sleek, customizable loading animation component that adds cinematic polish to your website or app.

## Description

**Venetian Preloader**

## Description

**Venetian Preloader** is a sleek, customizable loading animation component that adds cinematic polish to your website or app. Inspired by the look and motion of **Venetian blinds**, it reveals or conceals your page content through smooth, staggered transitions — perfect for preloading states, page transitions, or immersive brand intros.

This component gives creators **full control** over direction, animation timing, blind styling, and visual effects — allowing you to tailor the pre-loader to fit any aesthetic or brand identity seamlessly.

### Adjustable Properties

-   **Orientation** (Horizontal | Vertical)Choose how the blinds move — horizontally or vertically — to control the motion direction of the animation.
    
-   **Direction** (Forward | Reverse)Defines whether the blinds open or close during the animation. Useful for controlling entry vs. exit transitions.
    
-   **Blind Count** _(integer)_Sets the number of blinds displayed during the animation. Increasing this creates finer divisions for a more detailed effect.
    
-   **Preload Delay** _(seconds)_Determines how long the pre-loader remains visible before the animation begins. Ideal for syncing with page or asset loading times.
    
-   **Duration** _(seconds)_Controls the overall speed of the animation. Shorter durations create snappier transitions; longer ones feel more cinematic.
    
-   **Stagger Delay** _(seconds)_Adds a delay between each blind’s animation start, producing a cascading, rhythmic reveal motion.
    
-   **Background** _(hex color)_Sets the background color of the loading screen. Supports both light and dark themes.
    
-   **Blind Color** _(hex color)_Defines the color of the animated blinds. Customizable to match brand palettes or project color schemes.
    
-   **Show Logo** (Show | Hide)Toggles the visibility of an optional logo element during the preload sequence — perfect for subtle brand reinforcement.
    
-   **Enable Sound** (On | Off)Lets you add a light sound effect to the pre-loader, enhancing immersion during page load or transition.
    
-   Lets you pick the kind of easing transition you want.
    
-   **Sound Type** (Default | Custom)Choose between the built-in default sound or integrate a custom audio file for a personalized touch.
    

### Use Cases

-   Landing page pre-loaders
    
-   Page transition animations
    
-   Creative intros for studios or portfolios
    
-   Product or showcase page loading states
    

### Design Philosophy

The **Venetian Preloader** merges **functional motion** with **cinematic presentation**, creating anticipation and focus before your main content appears. Every parameter is designed to offer flexibility — from minimal and fast to bold and theatrical — all while maintaining smooth performance inside Framer.

### Technical Details

-   Fully responsive and optimized for Framer pages
    
-   Uses **React motion-based animation** for fluid transitions
    
-   Lightweight and performance-conscious
    
-   All properties are available in the **component property panel** for no-code customization
    
-   Supports **Framer’s animation timeline and interactions**
    

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

-   All · #2590

## Details

- **Author**: 7th Muse
- **Published**: 2025-11-20
- **Updated**: 2026-03-31
- **Added**: 2025-11-10
- **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