Envoi des fichiersPreparando…
0%
HTML + CSSNotifications

Toast de progression d'envoi

Un toast avec barre et pourcentage qui se remplit pendant l'envoi des fichiers, puis confirme et s'efface.

Réglages

16px
1x

Code

<div class="uv-zp"><button class="fire">Lancer l’envoi</button><div class="toast"><div class="copy"><b>Envoi des fichiers</b><small>Préparation…</small><i><em></em></i></div><strong>0%</strong></div></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 Notifications

Où l’utiliser

Un envoi prend du temps, et personne n'a envie de fixer une icône de chargement. Imaginez une photographe qui dépose les photos d'un mariage sur l'espace client, ou un propriétaire qui ajoute des images à une annonce de location : le toast de progression reste dans un coin, compte jusqu'à 100 % et affiche « Envoi terminé ».

La démo simule l'avancement avec un minuteur : reliez-le aux vrais événements d'envoi. Si vous ne connaissez pas la taille totale, le pourcentage mentira ; préférez alors une barre indéterminée. Pour un seul petit fichier, un simple message de succès suffit.