Image Loader
Image Loader with 3 progress types (bar/donut/spinner), blur/shimmer effects, customizable colors & fonts, ARIA accessibility, and contextual controls to showcase GenAI.
Made with Workshop
Build your own component with AI
Image Loader with 3 progress types (bar/donut/spinner), blur/shimmer effects, customizable colors & fonts, ARIA accessibility, and contextual controls to showcase GenAI.
Made with Workshop
Build your own component with AI
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.
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
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
