Minimal Animated Notification Bar Library – Notice.js

Preview:

Description:

Notice.js is a lightweight notification bar library that can be used to minimal clean alert/error/warning/success messages to your users.

You can choose from dark or light modes, slide animations, and custom positions to match the look of your application.

How to use it:

1. Import the stylesheet notice.css and JavaScript notice.js.

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

2. Create a new Notice instance.

const notice = new Notice({
      // or 'dark'
      theme: 'light',
      // 'top-right', 'top-center', 'top-right'
      // 'bottom-right', 'bottom-center', 'bottom-right'
      position: 'top-center',
      // 'slide-up', 'slide-down'
      // 'slide-left', 'slide-right'
      animation: 'slide-down',
})

3. Create an error notification bar that always stays on the scene until you click the close button. All available notification types:

• error
• warning
• success
• alert

notice.createNotice('Error Message', 'error', 'persisted')"

4. Create a toast-like temporary notification bar that auto-dismisses itself after 3 seconds.

notice.createNotice('Error Message', 'error', 3000)"