Schiebepuzzle-Loader
Drei abgerundete Kacheln, die abwechselnd um ein Quadrat rutschen, wie ein kleines Schiebepuzzle.
Einstellungen
Code
<div class="ul-grid"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i></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.
Mehr aus Loader
Wofür du ihn nutzen kannst
Es hat etwas Befriedigendes, wenn Teile an ihren Platz rutschen. Deshalb passt dieser Loader gut zu Tools mit Rastern und Boards: eine Kanban-App, die ihre Spalten lädt, eine Fotogalerie, die Vorschaubilder holt, oder ein Puzzlespiel zwischen zwei Levels. Das Ganze ist schlichtes HTML und CSS, drei kleine Blöcke und ein paar Zeilen Style.
Gib der einzelnen andersfarbigen Kachel die zweite Farbe, damit das Auge ihrem Weg folgen kann. Das Standardtempo wirkt bedacht. Wird es zu schnell, sieht es aus, als stritten sich die Kacheln um den freien Platz.