Téléchargement qui devient anneau
Le bouton se réduit en anneau de progression avec le pourcentage, trace une coche à la fin puis s'ouvre en Ouvrir.
Réglages
Code
<div class="uvq15-dlr"><div class="fl"><span class="ic" aria-hidden="true">PDF</span><div><b>informe-anual.pdf</b><small>4,2 MB</small></div></div><button type="button" class="bt" aria-label="Télécharger"><span class="lb a"><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="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg><span>Télécharger</span></span><svg class="rg" viewBox="0 0 40 40" aria-hidden="true"><circle class="tr" cx="20" cy="20" r="16"/><circle class="pg" cx="20" cy="20" r="16" pathLength="100"/></svg><span class="pc" aria-hidden="true">0</span><span class="ok" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 12.5l4 4 8-9" pathLength="1"/></svg></span><span class="lb b"><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="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></svg><span>Ouvrir</span></span></button><p class="sr" aria-live="polite"></p></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 Micro-interactions
Voir tout : Micro-interactionsOù l’utiliser
Un bouton de téléchargement a trois moments à montrer : l'attente, la progression et la fin. Celui-ci les garde au même endroit. La pilule se réduit en cercle, un anneau se remplit avec le pourcentage au centre, une coche se dessine sur fond vert à la fin et le bouton s'élargit de nouveau en Ouvrir. Un clic pendant le téléchargement l'annule.
La couleur principale règle l'état initial et le chargement, la secondaire l'état terminé. La progression est simulée avec requestAnimationFrame ; branche-la sur ton vrai fetch ou ton envoi en mettant à jour le tracé de l'anneau. La ligne du fichier est du HTML simple.