Configurable Loading Spinner & Toast Notification Library – NoticeKit

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

Preview:

Configurable Loading Spinner & Toast Notification Library – NoticeKit

Description:

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
$ 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
instance.showLoading({
  type: 'line'
});
// hide the loading spinner
instance.hideLoading()

5. Available options to customize the loading spinners.

instance.showLoading({
  // 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’
instance.showToast({
  text: 'Toast Message Here'
  type: 'default'
});

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

instance.showToast({
  autoClose: true
});

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

instance.showToast({
  showClose: false
});

Changelog:

v1.1.3 (07/24/2021)

  • Update

You Might Be Interested In:


Leave a Reply