Create Notifications Notice Widget With a Javascript Plugin | NoticeKit

NoticeKit is a small, lightweight, no-dependency notification tool that creates notifications easily with this JavaScript plugin. NoticeKit JavaScript library provides 6 types of download disks and 5 types of toast notifications for modern web development.

toast notification javascript, toastr, css toast, toast notification animation, toast notification, toast notification jquery

How to make use of it:

1. To use this library, including the next information on the net web page.

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

2. Or import the NoticeKit as an ES module.

$ npm i @ouduidui/notice
import Notice from "@ouduidui/notice";
import "@ouduidui/notice/style.css";

3. Create a brand new instance for the NoticeKit.

const instance = new Notice();

4. Show a loading spinner on the screen.

// show the loading spinner
  type: 'line'

// hide the loading spinner

5. Available choices to customize the loading spinners.


  // color of the loading spinner
  color: '#ffffff',

  // background color of the background overlay
  backgroundColor: 'rgba(0,0,0,.6)',

  // shows loading text
  title: 'Loading...',

  // font size of the loading text
  fontSize: 16,


6. Show a toast-like notification popup on the display.

  text: 'Toast Message Here'
  type: 'default'

7. Determine whether or not to auto dismiss the toast notification after 4 seconds.

  autoClose: true

8. Determine whether to indicate a detailed button inside the toast notification.

  showClose: false

The options for showing toast. Check out the available options.

Textstringtruetips text
typestringfalse'default'the style type of toast (‘default’ — no icon)



autoClosestringfalsetrueauto close after 4 seconds
showClosestringfalsefalseShow close button

Configurable Loading Spinner & Toast Notification, NoticeKit Plugin/Github

See Demo And Download

Official Website(OUDUIDUI): Click Here

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

Leave a Comment