Imagen que carga por resolución
Un paisaje aparece primero en píxeles gruesos, luego más finos y al final nítido, como una foto en una conexión lenta.
Ajustes
Código
<div class="uvq10-pix" role="status"><span class="sr">Cargando imagen</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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Loaders
Ver todos: LoadersDónde usarlo
Un paisaje de atardecer muestreado al compilar a seis por cuatro y a doce por ocho píxeles, con cada píxel pintado como una media real de los dos colores del bloque, que luego da paso a una versión vectorial nítida que se enfoca. Una barra fina bajo la imagen marca cada fase. Encaja en galerías, webs de viajes y muros con muchas fotos.
El color principal calienta el sol y el horizonte y el secundario fija el cielo y las montañas, así que toda la escena sigue tu paleta. Úsalo como marcador donde va a cargar una foto o un mapa.