Image loading

Component 615

About

A customizable image loader component that displays an animated grid overlay while the image loads. The grid cells blink initially, then fill with colors sampled from the image, expand to cover gaps, and fade out to reveal the final image with smooth transitions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image loading to your project and fits it to your theme.

Code

How Image loading is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ImageLoader from "@/components/ui/image-loading";


export default function DemoOne() {
  return (
    <div className="min-h-screen flex items-center justify-center p-8">
          <ImageLoader
            src="https://res.cloudinary.com/dctgknnt7/image/upload/v1758636339/middle_vqdg9p.jpg"
            alt="Mountain landscape"
            width="500px"
            height="630px"
            gridSize={15}
            cellGap={15}
            cellShape="square"
            cellColor="#cbd5e1"
            blinkSpeed={2000}
            transitionDuration={500}
            fadeOutDuration={600}
            loadingDelay={3500}
            className="rounded-lg overflow-hidden"
          />
    </div>
  )
}