← All elements
<div class="ts2"><div class="ok">Saved successfully<i></i></div><div class="er">Upload failed, retry<i></i></div></div>About this animation
Two toast messages that slide in from the right with a coloured edge and a draining timer bar.
How it works
Each toast slides in from the right with a springy easing, and a coloured bar at its bottom shrinks with scaleX to show the time remaining. The second starts a little later.
Ways to customise it
- Change the messages and colours.
- Edit the 4s timer.
- Add a close button.
Good to know
Use role status or alert on real toasts so screen readers announce them. Auto-dismiss should give enough time to read.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.