Sala de espera
Estás en la cola
personas delante de ti
Tiempo estimado 4 min
Es tu turno
Tienes 10 minutos para elegir tus entradas.
Sala de espera virtual con turno
Una cola de entradas con tu puesto en dígitos que ruedan, una fila que avanza y el aviso de que te toca.
Ajustes
Código
<div class="uvq13-que"><div class="pgx" aria-hidden="true"><p class="bd">Gira 2027</p><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Volver a la cola</button><div class="scr"></div><div class="dl" role="dialog" aria-modal="true" aria-labelledby="uvq13-que-t" aria-describedby="uvq13-que-d"><p class="kk">Sala de espera</p><div class="w1"><p class="ti" id="uvq13-que-t">Estás en la cola</p><div class="nb" aria-hidden="true"><span class="dg"><span><b>0</b><b>1</b><b>2</b><b>3</b><b>4</b><b>5</b><b>6</b><b>7</b><b>8</b><b>9</b></span></span><span class="dg"><span><b>0</b><b>1</b><b>2</b><b>3</b><b>4</b><b>5</b><b>6</b><b>7</b><b>8</b><b>9</b></span></span></div><p class="lb" id="uvq13-que-d">personas delante de ti</p><div class="tr" aria-hidden="true"><i class="door"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 21V4.5A1.5 1.5 0 0 1 7.5 3h9A1.5 1.5 0 0 1 18 4.5V21M3 21h18M14.5 12.5v.01"/></svg></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="pp"></i><i class="me"></i></div><p class="et"><span>Tiempo estimado</span> <b><span class="eta">4</span> min</b></p><label class="nt"><input type="checkbox" class="sw"><span>Avísame cuando sea mi turno</span></label><button type="button" class="lv">Salir de la cola</button></div><div class="w2"><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><p class="ti">Es tu turno</p><p class="lb">Tienes 10 minutos para elegir tus entradas.</p><button type="button" class="en">Entrar a comprar</button></div><p class="sr" aria-live="polite"></p></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 Overlays
Ver todos: OverlaysDónde usarlo
Las grandes ventas de entradas meten a la gente en una cola, y este overlay hace legible la espera. Tu puesto baja en dígitos grandes que ruedan, una fila de puntos camina hacia la puerta, el tiempo estimado se actualiza y un interruptor ofrece avisarte. Encaja en conciertos, lanzamientos y rebajas.
El color principal pinta la página, tu punto y los botones, y el secundario la insignia de éxito. Conecta el contador a la posición real de tu cola en lugar del temporizador, y conserva el botón de salir para que también se pueda abandonar con Escape.