Configurable Loading Spinner & Toast Notification Library – NoticeKit

Category: Javascript , Loading , Notification | May 6, 2021
Views Total: 167 views
Official Page: Go to website
Last Update: May 6, 2021
License: MIT


Configurable Loading Spinner & Toast Notification Library – NoticeKit


The NoticeKit JavaScript library provides 6 types of loading spinners and 5 types of toast notifications for modern web development.

How to use it:

1. To use this library, include the following files on the 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 new instance of the NoticeKit.

const instance = new Notice();

4. Show a loading spinner on the screen. Possible spinner types:

  • ‘line’ (default)
  • ‘dots’
  • ‘dots_zoom’
  • ‘cube_flip’
  • ‘dots_spin’
  • ‘cube_zoom’
// show the loading spinner
  type: 'line'

// hide the loading spinner

5. Available options 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 screen. Possible toast types:

  • ‘default’ (default)
  • ‘success’
  • ‘error’
  • ‘info’
  • ‘warning’
  text: 'Toast Message Here'
  type: 'default'

7. Determine whether to auto dismiss the toast notification after 4 seconds. Default: true.

  autoClose: true

8. Determine whether to show a close button inside the toast notification. Default: false.

  showClose: false

You Might Be Interested In:

Leave a Reply