Barrido de cuentarrevoluciones
La aguja de un cuentarrevoluciones sube hasta la zona roja y vuelve a cero, como el autotest al arrancar un coche.
Ajustes
Código
<div class="uvq10-gau" role="status"><span class="sr">Arrancando</span><div class="dial" aria-hidden="true"><i class="red"></i><b class="mj" style="--a:-120deg"></b><b class="mn" style="--a:-114deg"></b><b class="mn" style="--a:-108deg"></b><b class="mn" style="--a:-102deg"></b><b class="mn" style="--a:-96deg"></b><b class="mj" style="--a:-90deg"></b><b class="mn" style="--a:-84deg"></b><b class="mn" style="--a:-78deg"></b><b class="mn" style="--a:-72deg"></b><b class="mn" style="--a:-66deg"></b><b class="mj" style="--a:-60deg"></b><b class="mn" style="--a:-54deg"></b><b class="mn" style="--a:-48deg"></b><b class="mn" style="--a:-42deg"></b><b class="mn" style="--a:-36deg"></b><b class="mj" style="--a:-30deg"></b><b class="mn" style="--a:-24deg"></b><b class="mn" style="--a:-18deg"></b><b class="mn" style="--a:-12deg"></b><b class="mn" style="--a:-6deg"></b><b class="mj" style="--a:0deg"></b><b class="mn" style="--a:6deg"></b><b class="mn" style="--a:12deg"></b><b class="mn" style="--a:18deg"></b><b class="mn" style="--a:24deg"></b><b class="mj" style="--a:30deg"></b><b class="mn" style="--a:36deg"></b><b class="mn" style="--a:42deg"></b><b class="mn" style="--a:48deg"></b><b class="mn" style="--a:54deg"></b><b class="mj" style="--a:60deg"></b><b class="mn" style="--a:66deg"></b><b class="mn" style="--a:72deg"></b><b class="mn" style="--a:78deg"></b><b class="mn" style="--a:84deg"></b><b class="mj" style="--a:90deg"></b><b class="mn" style="--a:96deg"></b><b class="mn" style="--a:102deg"></b><b class="mn" style="--a:108deg"></b><b class="mn" style="--a:114deg"></b><b class="mj" style="--a:120deg"></b><span class="nu" style="--a:-120deg"><em>0</em></span><span class="nu" style="--a:-90deg"><em>1</em></span><span class="nu" style="--a:-60deg"><em>2</em></span><span class="nu" style="--a:-30deg"><em>3</em></span><span class="nu" style="--a:0deg"><em>4</em></span><span class="nu" style="--a:30deg"><em>5</em></span><span class="nu" style="--a:60deg"><em>6</em></span><span class="nu" style="--a:90deg"><em>7</em></span><span class="nu" style="--a:120deg"><em>8</em></span><span class="lbl">x1000</span><i class="nd"></i><i class="hub"></i></div></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
Una esfera completa en CSS: bisel cromado, textura de carbono, cuarenta y una marcas, números que se mantienen derechos con contrarrotaciones, una zona roja pintada con un degradado cónico enmascarado y una aguja con brillo que se pasa un poco. Encaja en configuradores de coches, apps deportivas, informes de rendimiento y pantallas de arranque con energía.
El color principal ilumina la aguja y el secundario las marcas. Úsalo en un arranque corto o mientras se preparan los datos, y evítalo en esperas largas, donde un loader más tranquilo funciona mejor.