Toast mit Upload-Fortschritt
Ein Toast mit Fortschrittsbalken und Prozentzahl, der sich beim Hochladen füllt, am Ende bestätigt und verschwindet.
Einstellungen
Code
<div class="uv-zp"><button class="fire">Upload starten</button><div class="toast"><div class="copy"><b>Dateien werden hochgeladen</b><small>Wird vorbereitet…</small><i><em></em></i></div><strong>0%</strong></div></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 Toasts
Wofür du ihn nutzen kannst
Uploads dauern, und niemand möchte währenddessen auf einen Spinner starren. Stell dir eine Fotografin vor, die eine Hochzeitsgalerie ins Kundenportal lädt, oder einen Vermieter, der Fotos für eine Wohnungsanzeige hochlädt: Der Fortschritts-Toast wartet in einer Ecke, zählt bis 100 % und meldet am Ende „Upload abgeschlossen“.
Die Demo simuliert den Fortschritt mit einem Timer, verknüpf ihn also mit den echten Upload-Events. Kennst du die Gesamtgröße nicht, lügt die Prozentzahl; dann ist ein unbestimmter Balken ehrlicher. Für eine einzelne kleine Datei reicht eine einfache Erfolgsmeldung.