Elegant Notice Bar With Progress Bar – notice.js

Preview:

Description:

notice.js is a small vanilla JavaScript notification plugin to display stackable temporary notice bars with progress bars representing the remaining time.

More features:

• 4 preset types.
• Modal mode: shows a background overlay when the notification is opened.
• LTR or RTL support.
• Custom open/close animations.

How to use it:

Install & download the package.

# NPM
$ npm install notice.js --save

Link to the necessary JavaScript and CSS files.

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

Create a new notification instance.

const instance = new NoticeJs({
      title: 'Notification title',
      text: 'Notification message'
})

Show the notification on the page.

instance.show();

Set the animation type. Available types:

• Success (default)
• Info
• Warning
• Error

const instance = new NoticeJs({
      title: 'Notification title',
      text: 'Notification message',
      type: 'error'
})

Set the position of the notification. Default: ‘topRight’.

const instance = new NoticeJs({
      title: 'Notification title',
      text: 'Notification message',
      position: 'topLeft'
})

Set the duration of the notification. Default: 3 seconds.

const instance = new NoticeJs({
      title: 'Notification title',
      text: 'Notification message',
      timeout: 30
})

Add extra CSS3 animations to the notification. In this example, we’re going to use Animate.css for the animations.

const instance = new NoticeJs({
      title: 'Notification title',
      text: 'Notification message',
      animation: {
        open: 'animated bounceInRight',
        close: 'animated bounceOutLeft'
      }
})

More configuration options.

const instance = new NoticeJs({
      title: 'Notification title',
      text: 'Notification message',
      newestOnTop: false,
      timeout: 30,
      progressBar: true,
      closeWith: ['button'],
      modal: true,
      width: 320,
      scroll: {
        maxHeightContent: 300,
        showOnHover: true
      },
      rtl: false
})

Callback functions.

const instance = new NoticeJs({
      title: 'Notification title',
      text: 'Notification message',
      callbacks: {
        beforeShow: [],
        onShow: [],
        afterShow: [],
        onClose: [],
        afterClose: [],
        onClick: [],
        onHover: [],
        onTemplate: []
      }
})