Customizable Growl Notifications With Progress Bars – SimpleNotification

Category: Javascript , Notification | August 8, 2019
Author: Glagan
Views Total: 409
Official Page: Go to website
Last Update: August 8, 2019
License: MIT


Customizable Growl Notifications With Progress Bars – SimpleNotification


The SimpleNotification JavaScript plugin helps developers create customizable, temporary, growl-style notifications with countdown progress bars on the page.

Also supports ‘Sticky’ mode that the notifications will always be visible until clicked.

Currently comes with 5 notification types: Success, Info, Error, Warning, and Message.

How to use it:

Download and import the SimpleNotification’s files into the document.

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

Create notifications with the following syntax.

// success notification
SimpleNotification.success(title, text, options);

// information notification, text, options);

// error notification
SimpleNotification.error(title, text, options);

// warning notification
SimpleNotification.warning(title, text, options);

// message notification
SimpleNotification.message(title, text, options);

Possible options to customize the notifications.

// options

  // image for notification
  image: undefined,

  // close on click
  closeOnClick: true,

  // top-left, top-right, bottom-left and bottom-right
  position: "top-right",

  // duration in ms
  duration: 4000,

  // fadeout in ms
  fadeout: 750,

  // enable/disable sticky mode
  sticky: false


v1.2.1 (08/08/2019)

  • Fix image shrinking problems and detection of undefined or empty strings in the content variable when creating a notification.


  • New textToNode function to support nested tags

v1.1 (03/27/2019)

  • Notifications can now have a close button and the default click to close behavior can be disabled.

You Might Be Interested In:

Leave a Reply