Download button that becomes a ring
The button shrinks into a progress ring with the percentage, draws a check when it finishes and opens back up as Open.
Settings
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="Download"><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>Download</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>Open</span></span></button><p class="sr" aria-live="polite"></p></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 Microinteractions
See all MicrointeractionsWhere to use it
A download button has three moments worth showing: waiting, progress and done. This one keeps them in the same spot. The pill shrinks into a circle, a ring fills with the percentage in the middle, a check draws itself on green when it reaches the end, and the button widens again into an Open action. Pressing during the download cancels it.
The main color sets the idle and loading state and the secondary one the finished state. The progress here is simulated with requestAnimationFrame; connect it to your real fetch or upload events by updating the ring offset. The file row above is plain HTML.