---
title: "Image Loader — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Khalid Hasan Zibon · Loaders. A sophisticated image loading component designed for AI-generated image workflows."
canonical: "https://framer.elliotli.dev/component/image-loader"
---

[Home](/)/[Components](/components)/[Loaders](/components/category/loaders)/Image Loader

# Image Loader

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

![Image Loader preview image 1](https://framer.elliotli.dev/og/component/image-loader/13dce2290597cdfb/1600x1200.jpg)

## Summary

A sophisticated image loading component designed for AI-generated image workflows.

## Description

A sophisticated image loading component designed for AI-generated image workflows. It displays a placeholder with customizable loading animations while an image loads, then smoothly transitions to reveal the final image. Perfect for showcasing AI image generation processes with professional loading states.

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

## Features

-   **3 Progress Types**: Bar, Donut, and Spinner with contextual controls
    

-   **Loading Effects**: Blur-to-reveal and shimmer effects for smooth transitions
    

-   **Smart Timing**: Configurable start delay and duration with realistic progress simulation
    

-   **Typography Control**: Separate font controls for progress text, percentage, and labels
    

-   **Color Customization**: Progress colors, background colors, and label colors
    

-   **Accessibility**: ARIA progressbar roles with live progress announcements
    

-   **Performance Optimized**: Constants-based code with efficient state management
    

-   **Contextual UI**: Controls only show when relevant to selected progress type
    

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

## Controls

-   **Image Settings**: Image source, object fit options
    
-   **Loading State**: Enable/disable, start delay (0-100s), duration (1-10s)
    
-   **Loading Effects**: Blur (with intensity) or Shimmer (with intensity)
    
-   **Progress Types**: Bar, Donut, or Spinner selection
    
-   **Bar Controls**: Height, radius, vertical gap (when bar selected)
    
-   **Donut Controls**: Size, thickness (when donut selected)
    
-   **Spinner Controls**: Size, thickness (when spinner selected)
    
-   **Typography**: Progress font, percentage font, label font
    
-   **Colors**: Progress color, background color, label color
    
-   **Labels**: Show/hide, temporary label option, custom text
    
-   **Appearance**: Border radius, background color
    

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

-   All · #8216

## Details

- **Author**: Khalid Hasan Zibon
- **Price**: $5.00
- **Published**: 2025-09-20
- **Updated**: 2025-09-19
- **Added**: 2025-09-11
- **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