Sin conexión

HTML + CSSMicro-interactions

Reconnexion en branchant le câble

La fiche pend librement ; en réessayant ou en la faisant glisser, elle entre dans la prise avec une étincelle et le voyant s'allume.

Réglages

16px
1x

Code

<div class="uvq15-plg"><svg class="sc" viewBox="0 0 260 110" aria-hidden="true"><path class="cb" d="M-10 86 C24 108 42 55 64 55"/><g class="pg" transform="translate(70 0)"><rect class="pr" x="30" y="44" width="14" height="5" rx="1.5"/><rect class="pr" x="30" y="61" width="14" height="5" rx="1.5"/><rect class="gr" x="-8" y="47" width="12" height="16" rx="3"/><rect class="bd" x="0" y="38" width="34" height="34" rx="8"/><rect class="hl" x="5" y="42" width="5" height="26" rx="2.5"/></g><rect class="pl" x="206" y="18" width="46" height="74" rx="9"/><rect class="ho" x="214" y="44" width="7" height="5" rx="1.5"/><rect class="ho" x="214" y="61" width="7" height="5" rx="1.5"/><circle class="led" cx="238" cy="30" r="3.2"/><g class="spk"><line x1="201.1" y1="51.0" x2="192.4" y2="46.0"/><line x1="208.0" y1="47.0" x2="208.0" y2="37.0"/><line x1="214.9" y1="51.0" x2="223.6" y2="46.0"/><line x1="214.9" y1="59.0" x2="223.6" y2="64.0"/><line x1="208.0" y1="63.0" x2="208.0" y2="73.0"/><line x1="201.1" y1="59.0" x2="192.4" y2="64.0"/></g></svg><div class="ft"><p class="st" aria-live="polite"><i></i><b>Hors ligne</b></p><button type="button" class="bt">Réessayer</button></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.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Micro-interactions

Voir tout : Micro-interactions

Où l’utiliser

Les états hors ligne se limitent souvent à une icône grise et un lien pour réessayer. Celui-ci donne une forme physique au moment : une fiche pend au bout de son câble près d'une prise murale et, avec Réessayer ou en la faisant glisser, elle entre dans la prise avec un ressort, une petite étincelle et un voyant vert. La courbe du câble suit le mouvement.

La couleur principale indique l'état connecté et la secondaire l'étincelle. Remplace la connexion simulée par ton vrai appel de reconnexion et ne déplace la fiche qu'en cas de succès. Déconnecter la retire, ce qui rend la démo facile à rejouer.