Custom Toast Messages With Countdown Timer And CSS3 Animations

Toast notifications are one of the most commonly used interactions in popular applications. It involves displaying simple messages to the user outside the usual flow of apps.

This post outlines a vanilla JavaScript library that helps create custom toast messages with a countdown timer and CSS3 slide/shake animations. Let’s get started.

How to use it:

1. Import & Initialize the Toast component.

import { Toast } from "./Toast/toast.js";

Toast.init();

2. Create a toast message on the page. Available parameters:

• message: Toast message.
• type: ‘success’ or ‘error’.
• position: Toast position.
• second: Timeout in seconds.

//Toast.show(message, type, position, second)
Toast.show("success toast", "success", "top-right", 5);

3. Create a custom notification type.

.toast--custom {
  background: #4F46E5;
  color: #fff;
}

Toast.show("Custom Toast (CSSSCRIPT)", "custom", "top-right", 5);

4. Override the default styles of the toast message.

/* toast message */
.toast {
  position: relative;
  cursor: pointer;
  width: 400px;
  padding: 15px 35px;
  font-size: 30px;
  font-family: sans-serif;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, top 0.2s, visibility 0.2s;
}
/* close button */
.cross {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
  cursor: pointer;
  padding: 4px;
  text-align: center;
}