Author: | tharith-p |
---|---|
Views Total: | 485 views |
Official Page: | Go to website |
Last Update: | December 28, 2022 |
License: | MIT |
Preview:

Description:
Yet another toast JavaScript library for displaying toast notifications with progress bars on the page.
More Features:
- 5 notification types.
- 6 progress bar styles.
- Auto dismiss or not.
How to use it:
1. Import the stylesheet toasting.css and JavaScript toasting.js into the page.
<link rel=”stylesheet” href=”dist/css/toasting.css” />
<script src=”dist/js/toasting.js”></script>
2. Create a default toast notification on the page.
toasting.create({ "title": "Toast Title", "text": "Some toast text here", });
3. Determine the notification type:
- default
- success
- warning
- error
- info
toasting.create({ "title": "Toast Title", "text": "Some toast text here", "type": "success", });
4. Determine the progress bar style
- default
- success
- warning
- error
- info
- rainbow
toasting.create({ "title": "Toast Title", "text": "Some toast text here", "progressBarType": "rainbow", });
5. Determine how long the toast notification should last. Default: 4000ms.
toasting.create({ "title": "Toast Title", "text": "Some toast text here", "timeout": 5000, });
6. Determine whether to make the toast notification Sticky, which means that the toast notification will never auto dismiss until clicked.
toasting.create({ "title": "Toast Title", "text": "Some toast text here", "autoHide": false, });
7. Determine whether to hide the progress bar. Default: false.
toasting.create({ "title": "Toast Title", "text": "Some toast text here", "hideProgressBar": true, });
8. Determing to pause the timer on hover.
toasting.create({ "title": "Toast Title", "text": "Some toast text here", "isHoverToPause": true, });
Changelog:
12/28/2022
- improve hover to pause
07/04/2022
- improve progress bar rainbow style
07/02/2022
- add Hover To Pause