Empreinte à maintenir pour confirmer
On garde le doigt sur l'empreinte : l'anneau se remplit, les sillons se colorent un à un et l'option est confirmée.
Réglages
Code
<div class="uvq02-fpr"><input type="checkbox" aria-label="Autoriser le paiement"><span class="pd" aria-hidden="true"><svg class="rg" viewBox="0 0 48 48"><circle cx="24" cy="24" r="22.5" pathLength="1"/></svg><svg class="fp" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path style="--i:0" d="M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4"/><path style="--i:1" d="M14 13.12c0 2.38 0 6.38-1 8.88"/><path style="--i:2" d="M9 6.8a6 6 0 0 1 9 5.2v2"/><path style="--i:3" d="M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2"/><path style="--i:4" d="M8.65 22c.21-.66.45-1.32.57-2"/><path style="--i:5" d="M17.29 21.02c.12-.6.43-2.3.5-3.02"/><path style="--i:6" d="M2 12a10 10 0 0 1 18-6"/><path style="--i:7" d="M21.8 16c.2-2 .131-5.354 0-6"/><path style="--i:8" d="M2 16h.01"/></svg><span class="ok"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span></span><span class="tx" aria-hidden="true"><b>Autoriser le paiement</b><small><span class="a">Maintenir appuyé</span><span class="c">Confirmé</span></small></span></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 Cases à cocher
Voir tout : Cases à cocherOù l’utiliser
Cette case à cocher demande un geste volontaire. En maintenant l'empreinte, un anneau de progression se remplit autour pendant que les sillons se colorent du centre vers l'extérieur ; relâcher trop tôt annule. Quand l'anneau se ferme, un badge avec une coche apparaît et l'indication passe à confirmé. Au clavier, Espace ou Entrée suffisent. Elle convient aux paiements, suppressions, consentements et actions qui ne doivent pas arriver par erreur.
La couleur principale anime l'anneau, les sillons et le badge, la secondaire le disque doux derrière l'empreinte. Le maintien dure une seconde à vitesse normale, et le réglage de vitesse le raccourcit ou l'allonge selon le sérieux de l'action.