España 2, Francia 1
Gol de EspañaMinuto 78 · asistencia de Olga
HTML + CSSToasts
Goal toast with stadium wave
A goal rolls the score up by one and the crowd does the wave across the stand; a button starts it again.
Settings
16px
1x
Code
<div class="uvq09-gol"><button type="button" class="fire">Score another</button><div class="tt" role="status"><span class="std" aria-hidden="true"><i class="lt l1"></i><i class="lt l2"></i><i class="fa" style="--c:0;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:1;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:2;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:3;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:4;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:5;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:6;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:7;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:8;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:9;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:10;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:11;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:12;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:13;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:14;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:15;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:0;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:1;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:2;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:3;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:4;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:5;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:6;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:7;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:8;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:9;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:10;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:11;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:12;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:13;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:14;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:15;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:0;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:1;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:2;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:3;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:4;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:5;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:6;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:7;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:8;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:9;--k1:var(--c2);--k2:var(--c2)"></i><i class="fa" style="--c:10;--k1:#e2e8f0;--k2:var(--c1)"></i><i class="fa" style="--c:11;--k1:var(--c1);--k2:var(--c2)"></i><i class="fa" style="--c:12;--k1:var(--c2);--k2:var(--c1)"></i><i class="fa" style="--c:13;--k1:#e2e8f0;--k2:var(--c2)"></i><i class="fa" style="--c:14;--k1:var(--c1);--k2:var(--c1)"></i><i class="fa" style="--c:15;--k1:var(--c2);--k2:var(--c2)"></i></span><div class="sc"><span class="sr">Spain 2, France 1</span><span class="tm" aria-hidden="true"><i class="fl es"></i>ESP</span><span class="nm h" aria-hidden="true"><span class="rl"><b>1</b><b>2</b></span></span><span class="sp" aria-hidden="true">–</span><span class="nm" aria-hidden="true"><span class="rl"><b>1</b></span></span><span class="tm" aria-hidden="true">FRA<i class="fl fr"></i></span></div><div class="ft"><span class="tx"><b>Goal for Spain</b><small>Minute 78 · assist by Olga</small></span><button type="button" class="wv">Do the wave</button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
See all ToastsWhere to use it
Live score apps announce goals all day, and this toast gives them a stadium feel. A small grandstand of 48 fans drawn with CSS sits under two floodlights, and each column rises with a delay so the wave travels from one end to the other. The home score rolls up to the new number with a springy bounce. It fits sports apps, fantasy leagues and live blogs.
The two colors are the home team's: they paint the flag, the shirts in the crowd and the scarves held up during the wave. The real score is in a hidden line for screen readers; change the teams, minute and assist to your match data.