Descarga que se vuelve anillo
El botón se encoge hasta ser un anillo de progreso con el porcentaje; al terminar dibuja un check y se abre en Abrir.
Ajustes
Código
<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="Descargar"><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>Descargar</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>Abrir</span></span></button><p class="sr" aria-live="polite"></p></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 Microinteracciones
Ver todos: MicrointeraccionesDónde usarlo
Un botón de descarga tiene tres momentos que vale la pena enseñar: espera, progreso y final. Este los mantiene en el mismo sitio. La píldora se encoge hasta ser un círculo, un anillo se llena con el porcentaje en el centro, un check se dibuja sobre verde al acabar y el botón vuelve a ensancharse como Abrir. Si lo pulsas durante la descarga, se cancela.
El color principal marca el estado inicial y de carga, y el secundario el de terminado. Aquí el progreso es simulado con requestAnimationFrame; conéctalo a tu fetch o a tu subida real actualizando el trazo del anillo. La fila del archivo es HTML sencillo.