---
title: "IntroLoader — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Kelvin Mata · Loaders. IntroLoader A premium, scroll-free intro and loading animation for Framer, built to make the first three seconds of your site feel intentional."
canonical: "https://framer.elliotli.dev/component/introloader"
---

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

# IntroLoader

Every load deserves an entrance

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

![IntroLoader preview image 1](https://framer.elliotli.dev/og/component/introloader/0fabfe7be257b602/1600x1200.jpg)

## Summary

IntroLoader A premium, scroll-free intro and loading animation for Framer, built to make the first three seconds of your site feel intentional.

## Description

## IntroLoader

**A premium, scroll-free intro and loading animation for Framer, built to make the first three seconds of your site feel intentional.**

Instead of a generic spinner or a blank flash before content appears, IntroLoader fans a set of your own images into a rotating card arrangement around a pulsing, rayed loading mark. It doesn't run on a fixed timer, it tracks your page's _actual_ load state and then dismisses itself with a smooth, directional wipe once everything is genuinely ready. The result reads less like a loading screen and more like an opening scene.

### Key Features

1.  **Real load-state tracking, not a fake timer**. A configurable minimum and maximum duration keep the experience consistent even on very fast or very slow connections.
    
2.  **Fanned image cards with organic motion** Add up to 8 of your own images i.e product shots, portfolio pieces, lifestyle photography — whatever fits your brand.
    
3.  **A living, breathing loading mark** At the center sits a customizable rayed "loading" glyph — its rays reveal one by one on entrance and retract on exit, with a soft pulsing glow behind it in your chosen accent color.
    
4.  **Five directional exit styles** Choose how the loader dismisses itself: **Up, Down, Left, Right,** or **Radial** — a circular iris-style wipe that closes in on itself.
    
5.  **Optional animated headline** Flip on the "Show Text" switch and every character reveals in sequence with the same slide-and-rotate motion as the rays, then retracts the same way on exit.
    
6.  **Full color and sizing control** Independently style the loader background, loader text color, hero background, hero text color, and accent color.
    
7.  **Speed control** A single speed multiplier scales every animation timing in the component proportionally so you can make the entire intro snappier or more cinematic without retuning each animation by hand.
    

### Ideal For

1.  Portfolio sites
    
2.  Product launches
    
3.  Fashion and lifestyle brands
    
4.  Agency landing pages, and any project where the first impression is worth designing.
    

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

-   All · #5747

## Details

- **Author**: Kelvin Mata
- **Price**: $8.00
- **Published**: 2026-07-19
- **Updated**: 2026-07-19
- **Added**: 2026-07-19
- **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