Custom Toast Messages With Countdown Timer And CSS3 Animations

Category: Javascript , Notification | June 5, 2022
Views Total:634 views
Official Page:Go to website
Last Update:June 5, 2022


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";

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

  • message: Toast message.
  • type: ‘success’ or ‘error’.
  • position: Toast position.
  • second: Timeout in seconds.
//, type, position, second)"success toast", "success", "top-right", 5);

3. Create a custom notification type.

.toast--custom {
  background: #4F46E5;
  color: #fff;
}"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;

You Might Be Interested In:

Leave a Reply