Paginación de pista de aterrizaje
Las páginas están pintadas en una pista vista desde arriba: el avión rueda hasta la elegida mientras las luces de aproximación corren hacia él.
Ajustes
Código
<nav class="uvq12-rw" aria-label="Paginación"><p class="rd"><span>Página</span><b class="pn">3</b><small>/ 8</small></p><div class="cs"><button type="button" class="pv" aria-label="Página anterior"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><div class="rn"><span class="cl" aria-hidden="true"></span><span class="gl" aria-hidden="true"></span><span class="rb" aria-hidden="true"></span><svg class="pl" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></svg><div class="ns"><button type="button" aria-label="Página 1" tabindex="-1">01</button><button type="button" aria-label="Página 2" tabindex="-1">02</button><button type="button" aria-label="Página 3" aria-current="page" tabindex="0">03</button><button type="button" aria-label="Página 4" tabindex="-1">04</button><button type="button" aria-label="Página 5" tabindex="-1">05</button><button type="button" aria-label="Página 6" tabindex="-1">06</button><button type="button" aria-label="Página 7" tabindex="-1">07</button><button type="button" aria-label="Página 8" tabindex="-1">08</button></div></div><button type="button" class="nx" aria-label="Página siguiente"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div></nav>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 Navegación
Ver todos: NavegaciónDónde usarlo
Una paginación dibujada como la pista de un aeropuerto vista desde arriba, con luces de borde, franjas de umbral y una línea central discontinua. Los números van pintados sobre el asfalto, un avión pequeño rueda hasta el que eliges y da la vuelta cuando retrocedes, y un destello de luces de aproximación corre hacia él. Encaja en webs de viajes, galerías y listas con pocas páginas.
El color principal pinta las luces verdes del umbral y el secundario el avión. Caben ocho páginas con holgura; cambia el número en los datos y el avión, las luces y el contador se ajustan solos.