Cargando
HTML + CSSLoaders
DNA double helix loader
Two rows of dots rotate around each other like a strand of DNA.
Settings
16px
1x
Code
<div class="uv-ldn" role="status"><span class="sr">Loading</span><span style="--i:0"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:1"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:2"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:3"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:4"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:5"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:6"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:7"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:8"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:9"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:10"><i class="a"></i><b></b><i class="b"></i></span><span style="--i:11"><i class="a"></i><b></b><i class="b"></i></span></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
Science, health and biotech sites can wait in style with this helix. Twelve pairs of dots move up and down out of phase, shrinking and fading as they pass behind each other, while faint rungs stretch and collapse between them. The result reads as a rotating DNA strand made only with CSS transforms.
Two colors mark the two strands, and the speed control sets how fast it turns. Use it while lab results, genome data or medical records load, or as a quiet animated divider in a science article.