Download-Button, der zum Ring wird
Der Button schrumpft zu einem Fortschrittsring mit Prozentzahl, zeichnet am Ende einen Haken und öffnet sich wieder als Öffnen.
Einstellungen
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="Herunterladen"><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>Herunterladen</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>Öffnen</span></span></button><p class="sr" aria-live="polite"></p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Mikrointeraktionen
Alle ansehen: MikrointeraktionenWofür du ihn nutzen kannst
Ein Download-Button hat drei Momente, die man zeigen sollte: Warten, Fortschritt und Fertig. Dieser hält sie am selben Platz. Die Pille schrumpft zum Kreis, ein Ring füllt sich mit der Prozentzahl in der Mitte, auf Grün zeichnet sich ein Haken, und der Button wird wieder breit als Öffnen. Ein Klick während des Ladens bricht ab.
Die Hauptfarbe gilt für Ruhe- und Ladezustand, die Zweitfarbe für den fertigen Zustand. Der Fortschritt ist hier mit requestAnimationFrame simuliert; verbinde ihn mit deinem echten Fetch oder Upload, indem du den Ring-Offset aktualisierst. Die Dateizeile ist schlichtes HTML.