---
title: "AnimatedPreloader — Framer component · Best of Framer"
description: "$2.00 · Framer component · by Viper Guy · Loaders. Preloader with animated progress bar"
canonical: "https://framer.elliotli.dev/component/animatedpreloader"
---

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

# AnimatedPreloader

Preloader with animated progress bar

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

![AnimatedPreloader preview image 1](https://framer.elliotli.dev/og/component/animatedpreloader/85780c1f925904c2/1600x1200.jpg)

## Summary

Preloader with animated progress bar

## Description

Preloader – Animated Progress Bar for Framer

Add a professional loading screen to your Framer project in seconds. This code component displays a smooth animated progress bar paired with a live percentage counter, giving users clear visual feedback while your site or app loads.

Built for designers who care about the details — every visual element is adjustable directly from Framer's property panel. No code needed.

KEY FEATURES

\- 6 line styles: Sharp, Pill, Dashed, Dotted, Glow, Pulse

\- Adjustable duration from 0.5s to 15s

\- Full color control: background, bar, and text independently

\- Adjustable bar thickness (1–12px)

\- Toggle percentage number and label on/off

\- Custom label text

\- onComplete event handler to trigger next actions

\- Fades out automatically when 100% is reached

PROPERTY CONTROLS

All settings are exposed in Framer's right panel — duration, colors, line style, thickness, font size, and visibility toggles. No overrides required.

USE CASES

\- Website and app loading screens

\- Page transition overlays

\- Portfolio and agency sites

\- SaaS dashboards and onboarding flows

COMPATIBILITY

Works with any Framer project. Drag onto the canvas, resize to full screen, and configure from the panel. Connect the onComplete event to navigate to your main page or trigger an animation.

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

-   All · #8432

## Details

- **Author**: Viper Guy
- **Price**: $2.00
- **Published**: 2026-05-27
- **Updated**: 2026-05-26
- **Added**: 2026-05-18
- **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