Loader lampe à lave
Une capsule allongée où des bulles chaudes montent, redescendent et fusionnent, comme une petite lampe à lave.
Réglages
Code
<svg width="0" height="0" style="position:absolute"><filter id="ul-lava"><feGaussianBlur stdDeviation="5"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -8"/></filter></svg><div class="ul-lava"><div><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Loaders
Où l’utiliser
Une lampe à lave, c’est la nostalgie des années 70 à l’état pur : ce loader donne tout de suite du caractère à une friperie vintage, au site d’un disquaire ou à la carte d’un bar à cocktails. Les bulles montent et descendent à leur rythme et se fondent entre elles et dans le fond, si bien qu’on les regarde volontiers.
Orange et rose forment le duo classique, mais un violet profond avec un bleu canard donne une ambiance plus nocturne. Tout en hauteur, il convient mieux à un écran d’accueil ou une colonne latérale qu’à une rangée de boutons. Il existe aussi ici un fond lampe à lave plein écran.