Recordatorio guardadoTe avisaremos mañana a las 9:00
HTML + CSSNotifications
Toast avec anneau de compte à rebours
Un anneau autour du bouton de fermeture montre le temps restant ; le survol le met en pause.
Réglages
16px
1x
6s
Code
<div class="uv-qcr"><button type="button" class="fire">Afficher à nouveau</button><div class="tt" role="status"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="13" r="7.5"/><path d="M12 9.5V13l2.5 1.5M5 4.5L3 6.5M19 4.5l2 2"/></svg></span><span class="tx"><b>Rappel enregistré</b><small>On te le rappellera demain à 9 h</small></span><button type="button" class="x" aria-label="Fermer"><svg class="rg" viewBox="0 0 36 36" aria-hidden="true"><circle cx="18" cy="18" r="16" pathLength="1"/></svg><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 8l8 8M16 8l-8 8"/></svg></button></div></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Notifications
Voir tout : NotificationsOù l’utiliser
Les toasts qui disparaissent seuls devraient montrer le temps qu'il leur reste, surtout s'ils contiennent une information utile. Ici, le bouton de fermeture est entouré d'un fin anneau qui se vide dans le sens horaire ; à la fin, le toast glisse hors de l'écran. Le survol ou le focus met l'anneau en pause pour lire tranquillement.
Règle la durée avec le curseur supplémentaire, de trois à douze secondes. Le bouton de fermeture renvoie le toast immédiatement. L'anneau est un cercle SVG animé avec un décalage de tirets.