---
title: "Animation loader — Free Framer component · Best of Framer"
description: "Free Framer component · by yahya · Loaders. A percentage loader animation component"
canonical: "https://framer.elliotli.dev/component/animation-loader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Animation loader

# Animation loader

A percentage loader animation component

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

![Animation loader preview image 1](https://framer.elliotli.dev/og/component/animation-loader/daafc240ed938626/1600x1200.jpg)

## Summary

A percentage loader animation component

## Description

This component is fully customizable with speed of the animation, colors and easing for a custom branded experience.

### How to actually set up this component to work on your site:

1.  Set it position type to fixed fixed (Absolute can work as well). Set the left and right positions to zero.
    
2.  Set its width to 100% and height to 100vh so that it covers the full page no matter the screensize.
    
3.  Make the Z-Index 10 so that it appears ontop of everything else
    
4.  Add Pointer Events: None –– Go under the styles Tab - Click the Plus Icon , you will see the Pointer Events option. Add it and set it to none, this will make sure that the loader doesn't block your site content.PS: Use the image below to follow the steps by using the blue marked numbers in the picture
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-t7s5gm2f-hi4hHbjYIzxfvCgV6vVK6n9y33YHjn)

That's all, everything else is about what you want to edit, the colors, the counter, duration and more

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-t7s5gm2f-Z3CWWG7RsDSi72EWBc3XwYY9Y2eBNB)

**Aimation Tip**: Try to make sure that the counter duration and the transition duration are close, so that the loader line and the counter are at the same pace to create a realistic 100% loader effectThat's all, for any questions, feel free to reach out.

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

-   All · #106

## Details

- **Author**: yahya
- **Published**: 2026-02-18
- **Updated**: 2026-02-18
- **Added**: 2026-02-14
- **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