Slinky on the stairs loader
A rainbow spring walks down step by step: its coils leap over in an arc one after another and stack on the step below.
Settings
Code
<div class="uvq10-sly" role="status"><span class="sr">Loading</span><div class="ly" aria-hidden="true"><i class="sp" style="--j:-2"></i><i class="sp" style="--j:-1"></i><i class="sp" style="--j:0"></i><i class="sp" style="--j:1"></i><i class="sp" style="--j:2"></i><i class="sp" style="--j:3"></i><i class="sp" style="--j:4"></i><i class="sp" style="--j:5"></i><i class="r r0"></i><i class="r r1"></i><i class="r r2"></i><i class="r r3"></i><i class="r r4"></i><i class="r r5"></i><i class="r r6"></i><i class="r r7"></i><i class="r r8"></i><i class="r r9"></i><i class="r r10"></i><i class="r r11"></i></div></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
Twelve coils with colors blended between the two block colors travel from one step to the next along arcs computed at build time, flipping as they go, so the spring stretches into an arch and gathers again below. The stairs pan with the motion and repeat, so the walk never ends. It suits toy brands, kids content and step by step processes.
The main color sets the top coils and the second the bottom ones, so the spring can be rainbow, metal grey or your brand tones. Use it for tasks that advance in stages, and keep a little side margin because the edges fade out.