Add a progress bar showing the time until the toast closes

README.md

@@ -155,6 +155,8 @@ If `gravity` is equals to `bottom`, it will be pushed from bottom.
 | style | object | Use the HTML DOM Style properties to add any style directly to toast | |
 | ariaLive | string | Announce the toast to screen readers, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions for options | "polite" |
 | oldestFirst | boolean | Set the order in which toasts are stacked in page | true |
+| progressBar | boolean | To show the close time progress bar or not | false |
+| progressBarColor | string | Set the progress bar color |  |
 
 > Deprecated properties: `backgroundColor` -  use `style.background` option instead
 

example/script.js

@@ -58,6 +58,21 @@ setTimeout(function() {
   }).showToast();
 }, 3000);
 
+// Toast with progress bar
+setTimeout(function() {
+    Toastify({
+        text: "With progress bar",
+        gravity: "top",
+        position: 'left',
+        style: {
+            background: '#0f3443'
+        },
+        progressBar: true,
+        progressBarColor: 'coral',
+        duration: 4500
+    }).showToast();
+}, 4500);
+
 // Displaying toast on manual action `Try`
 document.getElementById("new-toast").addEventListener("click", function() {
   Toastify({

src/toastify-es.js

@@ -28,6 +28,8 @@
  * @property {boolean} escapeMarkup - Toggle the default behavior of escaping HTML markup
  * @property {string} ariaLive - Use the HTML DOM style property to add styles to toast
  * @property {Object} style - Use the HTML DOM style property to add styles to toast
+ * @param {boolean} [options.progressBar] - Show toast progress bar
+ * @param {string} [options.progressBarColor] - Sets the toast progress bar color
  */
 
 
@@ -55,6 +57,8 @@ class Toastify {
       escapeMarkup: true,
       ariaLive: "polite",
       style: { background: "" },
+      progressBar: false,
+      progressBarColor: ''
     };
 
     constructor(options) {
@@ -164,6 +168,8 @@ class Toastify {
      * @param {boolean} [options.escapeMarkup=true] - Toggle the default behavior of escaping HTML markup
      * @param {string} [options.ariaLive] - Announce the toast to screen readers
      * @param {Object} [options.style] - Use the HTML DOM style property to add styles to toast
+     * @param {boolean} [options.progressBar] - Show toast progress bar
+     * @param {string} [options.progressBarColor] - Sets the toast progress bar color
      * @private
      */
     _init(options) {
@@ -338,6 +344,14 @@ class Toastify {
 
       }
 
+      if (this.options.progressBar)
+        var bar = document.createElement("div")
+        bar.className += "toast-progress";
+        bar.style.backgroundImage = "linear-gradient(90deg, " + this.options.progressBarColor + ", "+ this.options.progressBarColor +")";
+        bar.style.animationDuration = this.options.duration + "ms";
+        divElement.appendChild(bar);
+      }
+
       // Returning the generated element
       return divElement;
     }

src/toastify.css

@@ -23,10 +23,27 @@
     z-index: 2147483647;
 }
 
+.toast-progress {
+    height: 5px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-size: 0 100%;
+    background: transparent no-repeat 0 0;
+    animation-timing-function: linear;
+    animation-name: progress;
+    animation-play-state: paused;
+}
+
 .toastify.on {
     opacity: 1;
 }
 
+.toastify.on .toast-progress {
+    animation-play-state: running;
+}
+
 .toast-close {
     background: transparent;
     border: 0;
@@ -74,6 +91,15 @@
     max-width: -moz-fit-content;
 }
 
+@keyframes progress {
+    0% {
+        background-size: 0 100%;
+    }
+    100% {
+        background-size: 100% 100%;
+    }
+}
+
 @media only screen and (max-width: 360px) {
     .toastify-right, .toastify-left {
         margin-left: auto;

src/toastify.js

@@ -44,7 +44,9 @@
     offset: {x: 0, y: 0},
     escapeMarkup: true,
     ariaLive: 'polite',
-    style: {background: ''}
+    style: {background: ''},
+    progressBar: false,
+    progressBarColor: ''
   };
 
   // Defining the prototype of the object
@@ -86,6 +88,9 @@
       this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup;
       this.options.ariaLive = options.ariaLive || Toastify.defaults.ariaLive;
       this.options.style = options.style || Toastify.defaults.style;
+      this.options.progressBarColor = options.progressBarColor || Toastify.defaults.progressBarColor; // toast progress bar color
+      this.options.progressBar = options.progressBar || Toastify.defaults.progressBar; // toast progress bar show
+
       if(options.backgroundColor) {
         this.options.style.background = options.backgroundColor;
       }
@@ -260,6 +265,14 @@
 
       }
 
+      if (this.options.progressBar) {
+          var bar = document.createElement("div")
+          bar.className += "toast-progress";
+          bar.style.backgroundImage = "linear-gradient(90deg, " + this.options.progressBarColor + ", "+ this.options.progressBarColor +")";
+          bar.style.animationDuration = this.options.duration + "ms";
+          divElement.appendChild(bar);
+      }
+
       // Returning the generated element
       return divElement;
     },