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.
Session timeout warning
A modal with a circular countdown that offers to stay signed in before the session ends.
Settings
Code
<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">Simulate inactivity</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">Your session is about to expire</p><p class="ds" id="uv-ost-d">For security, we’ll sign you out if you do nothing.</p><div class="ac"><button type="button" class="out">Sign out</button><button type="button" class="st">Stay signed in</button></div></div><div class="v2"><p class="ti">Signed out</p><p class="ds">Sign in again to pick up where you left off.</p><button type="button" class="st">Sign in again</button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Banking, health and admin tools sign people out after inactivity, and a clear warning prevents lost work. This alert shows a ring that empties second by second around the remaining time, turning red and pulsing in the last ten seconds, with buttons to stay signed in or sign out now. When it reaches zero, the dialog switches to a signed out message.
The duration is adjustable with the extra slider, focus starts on the safe action and the dialog uses the alertdialog role. Connect the buttons to your session refresh and logout calls and keep the wording calm and specific.