Tu sesión está a punto de caducar
Por seguridad cerraremos la sesión si no haces nada.
Sesión cerrada
Vuelve a entrar para seguir donde lo dejaste.
Aviso de sesión a punto de caducar
Un modal con cuenta atrás circular que ofrece seguir conectado antes de que la sesión termine.
Ajustes
Código
<div class="uv-ost"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire">Simular inactividad</button><div class="scr"></div><div class="dl" role="alertdialog" aria-modal="true" aria-labelledby="uv-ost-t" aria-describedby="uv-ost-d"><div class="rg" aria-hidden="true"><svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="17" class="bg"/><circle cx="20" cy="20" r="17" class="fg" pathLength="1"/></svg><output>0:30</output></div><div class="v1"><p class="ti" id="uv-ost-t">Tu sesión está a punto de caducar</p><p class="ds" id="uv-ost-d">Por seguridad cerraremos la sesión si no haces nada.</p><div class="ac"><button type="button" class="out">Cerrar sesión</button><button type="button" class="st">Seguir conectado</button></div></div><div class="v2"><p class="ti">Sesión cerrada</p><p class="ds">Vuelve a entrar para seguir donde lo dejaste.</p><button type="button" class="st">Entrar de nuevo</button></div></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
La banca, la sanidad y los paneles de administración cierran la sesión por inactividad, y un aviso claro evita perder trabajo. Esta alerta muestra un anillo que se vacía segundo a segundo alrededor del tiempo restante, que se vuelve rojo y late en los últimos diez segundos, con botones para seguir conectado o salir ya. Al llegar a cero pasa a un mensaje de sesión cerrada.
La duración se ajusta con el control extra, el foco empieza en la acción segura y el diálogo usa el rol alertdialog. Conecta los botones a la renovación de sesión y al cierre de tu backend.