Cargando
HTML + CSSLoaders
Doble hélice de ADN
Dos filas de puntos que giran una alrededor de la otra como una cadena de ADN.
Ajustes
16px
1x
Código
<div class="uv-ldn" role="status"><span class="sr">Cargando</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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Loaders
Ver todos: LoadersDónde usarlo
Las webs de ciencia, salud y biotecnología pueden esperar con estilo con esta hélice. Doce parejas de puntos suben y bajan desfasadas, encogiéndose y atenuándose al pasar una detrás de la otra, mientras unos peldaños tenues se estiran y se recogen entre ellas. El resultado se lee como una cadena de ADN girando hecha solo con transformaciones CSS.
Dos colores marcan las dos hebras y la velocidad decide lo rápido que gira. Úsalo mientras cargan resultados de laboratorio, datos genómicos o historiales médicos, o como separador animado.