Galileo thermometer loader
The glass bulbs of a Galileo thermometer sink one by one as the liquid warms and float back up as it cools.
Settings
Code
<div class="uvq10-gal" role="status"><span class="sr">Loading</span><i class="cap t" aria-hidden="true"></i><div class="tb" aria-hidden="true"><span class="bl b0" style="--i:0"><i></i><b>26°</b></span><span class="bl b1" style="--i:1"><i></i><b>24°</b></span><span class="bl b2" style="--i:2"><i></i><b>22°</b></span><span class="bl b3" style="--i:3"><i></i><b>20°</b></span><span class="bl b4" style="--i:4"><i></i><b>18°</b></span><i class="gl"></i></div><i class="cap b" aria-hidden="true"></i></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 tall glass column with brass caps and five colored bulbs, each with a little gold tag showing its temperature. As the liquid warms, a pink tint rises and the heaviest bulbs sink first; then it cools and they float back in reverse order. It suits weather sites, home and climate apps, science shops and slow background tasks.
The main color sets the warm bulbs and the tint, the second the cool bulbs and the liquid, with a golden yellow in between. It is tall, so place it in a sidebar or next to a short vertical message.