Sin conexión

HTML + CSSMicrointeracciones

Reintentar conexión enchufando el cable

El enchufe cuelga suelto; al reintentar o arrastrarlo entra en la toma con un muelle, salta una chispa y se enciende el piloto.

Ajustes

16px
1x

Código

<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>Sin conexión</b></p><button type="button" class="bt">Reintentar</button></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Microinteracciones

Ver todos: Microinteracciones

Dónde usarlo

Los estados sin conexión suelen ser un icono gris y un enlace de reintentar. Este da forma física al momento: un enchufe cuelga de su cable junto a una toma de pared y, al pulsar Reintentar o arrastrarlo, entra en la toma con un muelle, una pequeña chispa y un piloto verde. La curva del cable se recalcula mientras se mueve.

El color principal marca el estado conectado y el secundario la chispa. Cambia la conexión simulada por tu llamada real de reconexión y mueve el enchufe solo cuando funcione. Desconectar lo vuelve a sacar, así que la demostración se repite fácilmente.