Cargando imagen
HTML + CSSLoaders
Progressive image loader
A landscape shows up first in chunky pixels, then finer ones and finally sharp, like a photo on a slow connection.
Settings
16px
1x
Code
<div class="uvq10-pix" role="status"><span class="sr">Loading image</span><div class="im" aria-hidden="true"><svg class="px l0" viewBox="0 0 6 4" preserveAspectRatio="none" aria-hidden="true"><rect x="0" y="0" width="1.02" height="1.02" class="p0"/><rect x="1" y="0" width="1.02" height="1.02" class="p0"/><rect x="2" y="0" width="1.02" height="1.02" class="p0"/><rect x="3" y="0" width="1.02" height="1.02" class="p0"/><rect x="4" y="0" width="1.02" height="1.02" class="p1"/><rect x="5" y="0" width="1.02" height="1.02" class="p0"/><rect x="0" y="1" width="1.02" height="1.02" class="p2"/><rect x="1" y="1" width="1.02" height="1.02" class="p3"/><rect x="2" y="1" width="1.02" height="1.02" class="p4"/><rect x="3" y="1" width="1.02" height="1.02" class="p4"/><rect x="4" y="1" width="1.02" height="1.02" class="p5"/><rect x="5" y="1" width="1.02" height="1.02" class="p2"/><rect x="0" y="2" width="1.02" height="1.02" class="p6"/><rect x="1" y="2" width="1.02" height="1.02" class="p6"/><rect x="2" y="2" width="1.02" height="1.02" class="p6"/><rect x="3" y="2" width="1.02" height="1.02" class="p6"/><rect x="4" y="2" width="1.02" height="1.02" class="p6"/><rect x="5" y="2" width="1.02" height="1.02" class="p6"/><rect x="0" y="3" width="1.02" height="1.02" class="p7"/><rect x="1" y="3" width="1.02" height="1.02" class="p7"/><rect x="2" y="3" width="1.02" height="1.02" class="p7"/><rect x="3" y="3" width="1.02" height="1.02" class="p7"/><rect x="4" y="3" width="1.02" height="1.02" class="p7"/><rect x="5" y="3" width="1.02" height="1.02" class="p7"/></svg><svg class="px l1" viewBox="0 0 12 8" preserveAspectRatio="none" aria-hidden="true"><rect x="0" y="0" width="1.02" height="1.02" class="p0"/><rect x="1" y="0" width="1.02" height="1.02" class="p0"/><rect x="2" y="0" width="1.02" height="1.02" class="p0"/><rect x="3" y="0" width="1.02" height="1.02" class="p0"/><rect x="4" y="0" width="1.02" height="1.02" class="p0"/><rect x="5" y="0" width="1.02" height="1.02" class="p0"/><rect x="6" y="0" width="1.02" height="1.02" class="p0"/><rect x="7" y="0" width="1.02" height="1.02" class="p0"/><rect x="8" y="0" width="1.02" height="1.02" class="p0"/><rect x="9" y="0" width="1.02" height="1.02" class="p0"/><rect x="10" y="0" width="1.02" height="1.02" class="p0"/><rect x="11" y="0" width="1.02" height="1.02" class="p0"/><rect x="0" y="1" width="1.02" height="1.02" class="p8"/><rect x="1" y="1" width="1.02" height="1.02" class="p8"/><rect x="2" y="1" width="1.02" height="1.02" class="p8"/><rect x="3" y="1" width="1.02" height="1.02" class="p8"/><rect x="4" y="1" width="1.02" height="1.02" class="p8"/><rect x="5" y="1" width="1.02" height="1.02" class="p8"/><rect x="6" y="1" width="1.02" height="1.02" class="p8"/><rect x="7" y="1" width="1.02" height="1.02" class="p3"/><rect x="8" y="1" width="1.02" height="1.02" class="p5"/><rect x="9" y="1" width="1.02" height="1.02" class="p3"/><rect x="10" y="1" width="1.02" height="1.02" class="p8"/><rect x="11" y="1" width="1.02" height="1.02" class="p8"/><rect x="0" y="2" width="1.02" height="1.02" class="p3"/><rect x="1" y="2" width="1.02" height="1.02" class="p3"/><rect x="2" y="2" width="1.02" height="1.02" class="p3"/><rect x="3" y="2" width="1.02" height="1.02" class="p3"/><rect x="4" y="2" width="1.02" height="1.02" class="p3"/><rect x="5" y="2" width="1.02" height="1.02" class="p3"/><rect x="6" y="2" width="1.02" height="1.02" class="p3"/><rect x="7" y="2" width="1.02" height="1.02" class="p5"/><rect x="8" y="2" width="1.02" height="1.02" class="p9"/><rect x="9" y="2" width="1.02" height="1.02" class="p5"/><rect x="10" y="2" width="1.02" height="1.02" class="p3"/><rect x="11" y="2" width="1.02" height="1.02" class="p3"/><rect x="0" y="3" width="1.02" height="1.02" class="p10"/><rect x="1" y="3" width="1.02" height="1.02" class="p11"/><rect x="2" y="3" width="1.02" height="1.02" class="p4"/><rect x="3" y="3" width="1.02" height="1.02" class="p10"/><rect x="4" y="3" width="1.02" height="1.02" class="p4"/><rect x="5" y="3" width="1.02" height="1.02" class="p12"/><rect x="6" y="3" width="1.02" height="1.02" class="p12"/><rect x="7" y="3" width="1.02" height="1.02" class="p4"/><rect x="8" y="3" width="1.02" height="1.02" class="p5"/><rect x="9" y="3" width="1.02" height="1.02" class="p4"/><rect x="10" y="3" width="1.02" height="1.02" class="p13"/><rect x="11" y="3" width="1.02" height="1.02" class="p2"/><rect x="0" y="4" width="1.02" height="1.02" class="p14"/><rect x="1" y="4" width="1.02" height="1.02" class="p6"/><rect x="2" y="4" width="1.02" height="1.02" class="p6"/><rect x="3" y="4" width="1.02" height="1.02" class="p12"/><rect x="4" y="4" width="1.02" height="1.02" class="p6"/><rect x="5" y="4" width="1.02" height="1.02" class="p6"/><rect x="6" y="4" width="1.02" height="1.02" class="p6"/><rect x="7" y="4" width="1.02" height="1.02" class="p6"/><rect x="8" y="4" width="1.02" height="1.02" class="p6"/><rect x="9" y="4" width="1.02" height="1.02" class="p6"/><rect x="10" y="4" width="1.02" height="1.02" class="p6"/><rect x="11" y="4" width="1.02" height="1.02" class="p6"/><rect x="0" y="5" width="1.02" height="1.02" class="p6"/><rect x="1" y="5" width="1.02" height="1.02" class="p6"/><rect x="2" y="5" width="1.02" height="1.02" class="p15"/><rect x="3" y="5" width="1.02" height="1.02" class="p16"/><rect x="4" y="5" width="1.02" height="1.02" class="p6"/><rect x="5" y="5" width="1.02" height="1.02" class="p6"/><rect x="6" y="5" width="1.02" height="1.02" class="p6"/><rect x="7" y="5" width="1.02" height="1.02" class="p6"/><rect x="8" y="5" width="1.02" height="1.02" class="p16"/><rect x="9" y="5" width="1.02" height="1.02" class="p16"/><rect x="10" y="5" width="1.02" height="1.02" class="p6"/><rect x="11" y="5" width="1.02" height="1.02" class="p6"/><rect x="0" y="6" width="1.02" height="1.02" class="p7"/><rect x="1" y="6" width="1.02" height="1.02" class="p7"/><rect x="2" y="6" width="1.02" height="1.02" class="p7"/><rect x="3" y="6" width="1.02" height="1.02" class="p7"/><rect x="4" y="6" width="1.02" height="1.02" class="p7"/><rect x="5" y="6" width="1.02" height="1.02" class="p15"/><rect x="6" y="6" width="1.02" height="1.02" class="p7"/><rect x="7" y="6" width="1.02" height="1.02" class="p7"/><rect x="8" y="6" width="1.02" height="1.02" class="p7"/><rect x="9" y="6" width="1.02" height="1.02" class="p7"/><rect x="10" y="6" width="1.02" height="1.02" class="p7"/><rect x="11" y="6" width="1.02" height="1.02" class="p7"/><rect x="0" y="7" width="1.02" height="1.02" class="p7"/><rect x="1" y="7" width="1.02" height="1.02" class="p7"/><rect x="2" y="7" width="1.02" height="1.02" class="p7"/><rect x="3" y="7" width="1.02" height="1.02" class="p7"/><rect x="4" y="7" width="1.02" height="1.02" class="p7"/><rect x="5" y="7" width="1.02" height="1.02" class="p7"/><rect x="6" y="7" width="1.02" height="1.02" class="p7"/><rect x="7" y="7" width="1.02" height="1.02" class="p7"/><rect x="8" y="7" width="1.02" height="1.02" class="p7"/><rect x="9" y="7" width="1.02" height="1.02" class="p7"/><rect x="10" y="7" width="1.02" height="1.02" class="p7"/><rect x="11" y="7" width="1.02" height="1.02" class="p7"/></svg><svg class="vc" viewBox="0 0 300 200" preserveAspectRatio="none" aria-hidden="true"><defs><linearGradient id="uvq10-pix-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" class="s0"/><stop offset=".6" class="s1"/></linearGradient></defs><rect width="300" height="200" fill="url(#uvq10-pix-sky)"/><circle cx="210" cy="60" r="30" class="sun"/><polygon points="0,200 0,120 48,84 90,110 150,72 204,104 252,88 300,100 300,200" class="far"/><polygon points="0,200 0,156 66,130 138,160 222,134 300,148 300,200" class="near"/></svg><i class="pg"></i></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Loaders
See all LoadersWhere to use it
A sunset landscape sampled at build time at six by four and twelve by eight pixels, with every pixel colored as a real average of the two block colors, then replaced by a sharp vector version that comes into focus. A thin bar under the image tracks each stage. It suits galleries, travel sites and image heavy feeds.
The main color warms the sun and the horizon and the second sets the sky and the mountains, so the whole scene follows your palette. Use it as a placeholder where a photo or a map is about to load.