Cargando imagen
HTML + CSSLoader

Bild, das stufenweise schärfer lädt

Eine Landschaft erscheint erst in groben Pixeln, dann in feineren und zuletzt scharf, wie ein Foto bei langsamer Verbindung.

Einstellungen

16px
1x

Code

<div class="uvq10-pix" role="status"><span class="sr">Bild wird geladen</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 für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Loader

Alle ansehen: Loader

Wofür du ihn nutzen kannst

Eine Abendlandschaft, beim Build mit sechs mal vier und zwölf mal acht Pixeln abgetastet, wobei jedes Pixel ein echter Mittelwert der beiden Blockfarben ist. Danach folgt eine scharfe Vektorversion, die sich scharf stellt. Ein dünner Balken unter dem Bild zeigt jede Stufe an. Passt zu Galerien, Reiseseiten und bildlastigen Feeds.

Die Hauptfarbe wärmt Sonne und Horizont, die zweite bestimmt Himmel und Berge, so folgt die ganze Szene deiner Palette. Nutze sie als Platzhalter, wo gleich ein Foto oder eine Karte lädt.