Press "Enter" to skip to content

Simple JS Library For Toast Notifications | Toasting

Toasting JavaScript library to display toast notifications with progress bars on the page.

toast notification jquery, toast message jquery, toast notification animation, css toast, toaster in js, vanilla toast js, jquery toaster

How to make use of it:

1. Import the stylesheet toasting.css and JavaScript toasting.js into the web page.

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

2. Create a default toast notification on the web page.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
});

3. Determine the notification type:

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "type": "success",
});

4. Determine the progress bar style.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "progressBarType": "rainbow",
});

5. Determine how lengthy the toast notification should beĀ final.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "timeout": 5000,
});

6. Determine whether or not to make the toast notification Sticky, which implies that the toast notification won’t ever auto dismiss till clicked.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "autoHide": false,
});

7. Determine whether or not to cover the progress bar.

toasting.create({
  "title": "Toast Title",
  "text": "Some toast text here",
  "hideProgressBar": true,
});

Easy JS Library For Toast Notifications, Toasting Plugin/Github


See Demo And Download

Official Website(tharith-p): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.