A Vanilla JavaScript Animated Toast Popup | vanilla-toasts

Vanilla toast (vtoast) is a lightweight VanillaJS toast library. It is lighter and contains fewer lines of code. It’s inspired by Toaster but removes the dependency on jQuery.

More Features:

• With the Close button or not.
• Custom duration.
• Custom position.
• Auto cancels auto-dismiss when targeted

How to make use of it:

1. Insert the stylesheet vtoast.css and JavaScrip vtoast.js into the doc.

<link rel="stylesheet" href="vtoast.css" />
<script src="vtoast.js"></script>

2. Display a primary toast popup that routinely dismisses after 5 seconds.

vtoast.show('Only Content');

3. Display a toast popup with a title.

vtoast.show('test', 'this is a text message.');

4. Show a progress bar on the highest or backside of the toast popup. Default: none.

vtoast.show('test', 'this is a text message.', {
  progressbar: 'top' // or bottom
});

5. Customize the auto dismiss timeout. Default: 5 seconds.

vtoast.show('test', 'this is a text message.', {
  duration: 3000
});

6. Change the place of the toast popup. Default: top-right.

vtoast.show('test', 'this is a text message.', {
  position: 'bottom-center'
});

7. Determine whether or not to indicate a detailed icon inside the toast popup. Default: false.

vtoast.show('test', 'this is a text message.', {
  showclose: true
});

8. More default configs.

vtoast.show('test', 'this is a text message.', {
  width: 350,
  margin: 10,
  color: "#FFFFFF",
  backgroundcolor: "#4fab29",
  unfocusduration: 1000,
  opacity: "1"
});

Animated Toast Popup With JavaScript, Toast Notification Javascript, Simple Javascript Toast Notifications

See Demo And Download

Official Website(paper-development): Click Here

This superior jQuery/javascript plugin is developed by paper-development. For extra Advanced Usages, please go to the official website.