Lluvia en 15 minutosModerada de 18:15 a 18:40
HTML + CSSToasts

Toast de lluvia por minutos

Avisa de que va a llover con un gráfico de barras minuto a minuto que crece al aparecer y un aviso que puedes activar.

Ajustes

16px
1x

Código

<div class="uvq09-rdr"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><div class="hd"><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 15.5a4.5 4.5 0 0 1-.4-9A6 6 0 0 1 18 8a3.8 3.8 0 0 1-.5 7.5z"/></svg><i></i><i></i><i></i></span><span class="tx"><b>Lluvia en 15 minutos</b><small>Moderada de 18:15 a 18:40</small></span><button type="button" class="bl" aria-pressed="false" aria-label="Avisarme cuando empiece"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg></button></div><div class="ch" aria-hidden="true"><i class="z" style="--h:4%;--i:0"></i><i class="z" style="--h:4%;--i:1"></i><i class="z" style="--h:4%;--i:2"></i><i class="z" style="--h:4%;--i:3"></i><i class="z" style="--h:4%;--i:4"></i><i class="z" style="--h:4%;--i:5"></i><i style="--h:12%;--i:6"></i><i style="--h:24%;--i:7"></i><i style="--h:40%;--i:8"></i><i style="--h:58%;--i:9"></i><i style="--h:74%;--i:10"></i><i style="--h:88%;--i:11"></i><i style="--h:95%;--i:12"></i><i style="--h:84%;--i:13"></i><i style="--h:66%;--i:14"></i><i style="--h:52%;--i:15"></i><i style="--h:44%;--i:16"></i><i style="--h:36%;--i:17"></i><i style="--h:26%;--i:18"></i><i style="--h:18%;--i:19"></i><i style="--h:11%;--i:20"></i><i style="--h:6%;--i:21"></i><i class="z" style="--h:4%;--i:22"></i><i class="z" style="--h:4%;--i:23"></i></div><div class="ax" aria-hidden="true"><span>Ahora</span><span>30 min</span><span>60 min</span></div></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 Toasts

Ver todos: Toasts

Dónde usarlo

Las apps del tiempo hicieron familiar el gráfico de lluvia de la próxima hora, que explica una previsión antes que las palabras. Este toast junta una nube con gotas que caen, un resumen corto y 24 barras que suben una tras otra con transiciones CSS escalonadas. Una campana con aria-pressed permite pedir un aviso. Va bien en servicios del tiempo, eventos al aire libre y planificación de repartos.

El color principal rellena las barras y el icono; el secundario marca los minutos sin lluvia. Sustituye la lista de datos por valores reales de tu API y cambia las etiquetas del eje si muestras otro intervalo de tiempo.