Image Loader

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

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.

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

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