From aecc82486446ae4cb5e2d8e56e01fa53f16aedda Mon Sep 17 00:00:00 2001
From: Anand Rockzz <anandchakru.forum@gmail.com>
Date: Tue, 23 Jan 2018 01:00:13 -0800
Subject: [PATCH 1/3] anim-bar

animating bar inside each toast indicating when the toast will self-destruct [Imgur](https://i.imgur.com/TJL3CIW.gifv)
---
 src/toast.component.ts | 10 ++++++++++
 style-bootstrap.css    |  5 +++++
 style.css              | 27 +++++++++++++++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/src/toast.component.ts b/src/toast.component.ts
index c60e26f..4f9ea4e 100644
--- a/src/toast.component.ts
+++ b/src/toast.component.ts
@@ -13,6 +13,7 @@ import { ToastData } from './toasty.service';
   selector: 'ng2-toast',
   template: `
         <div class="toast" [ngClass]="[toast.type, toast.theme]">
+            <div class="time-bar" [ngStyle]="timeBarAnim()">
             <div *ngIf="toast.showClose" class="close-button" (click)="close($event)"></div>
             <div *ngIf="toast.title || toast.msg" class="toast-text">
                 <span *ngIf="toast.title" class="toast-title" [innerHTML]="toast.title | safeHtml"></span>
@@ -26,6 +27,15 @@ export class ToastComponent {
   @Input() toast: ToastData;
   @Output('closeToast') closeToastEvent = new EventEmitter();
 
+  /**
+   * Returns Animation Style for time-bar
+   *
+   */
+  timeBarAnim() {
+    let lef = this.toast.timeout + 'ms linear 0s 1 anim-time-bar';
+    return { 'animation': + lef, '-webkit-animation': lef, '-moz-animation': lef };
+  }
+  
   /**
    * Event handler invokes when user clicks on close button.
    * This method emit new event into ToastyContainer to close it.
diff --git a/style-bootstrap.css b/style-bootstrap.css
index ca63308..d7ba7ae 100644
--- a/style-bootstrap.css
+++ b/style-bootstrap.css
@@ -169,3 +169,8 @@
   background-color: #f0ad4e;
   border-color: #eea236;
 }
+
+
+#toasty .toast.toasty-theme-bootstrap.toasty-type-default .time-bar {
+    background-color: #000;
+}
diff --git a/style.css b/style.css
index 0fd74fb..a76e169 100644
--- a/style.css
+++ b/style.css
@@ -389,3 +389,30 @@
 #toasty .toast .toast-text label:hover {
   text-decoration: none;
 }
+
+#toasty .toast .time-bar {
+    position: absolute;
+    height: 3px;
+    background-color: #fff;
+    bottom: 0;
+    opacity: 0.5;
+}
+
+@keyframes anim-time-bar {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}
+
+@-webkit-keyframes toasty-shake {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}
+

From 388937c903555d88290afa1c03ca0c1f25b33d29 Mon Sep 17 00:00:00 2001
From: Anand Rockzz <anandchakru@users.noreply.github.com>
Date: Tue, 23 Jan 2018 07:51:00 -0800
Subject: [PATCH 2/3] Update .travis.yml

---
 .travis.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index dfe3f7b..517648c 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,7 +12,7 @@ notifications:
   email: false
 
 node_js:
-  - '6'
+  - '9'
 
 branches:
   except:
@@ -33,4 +33,4 @@ after_success:
 
 before_script:
   - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
\ No newline at end of file
+  - sh -e /etc/init.d/xvfb start

From d870df8aa6ba995a6d0e2880530156d81e7da0d3 Mon Sep 17 00:00:00 2001
From: Anand Rockzz <anandchakru@users.noreply.github.com>
Date: Tue, 23 Jan 2018 11:44:57 -0800
Subject: [PATCH 3/3] Update style.css

---
 style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style.css b/style.css
index a76e169..5a15430 100644
--- a/style.css
+++ b/style.css
@@ -407,7 +407,7 @@
     }
 }
 
-@-webkit-keyframes toasty-shake {
+@-webkit-keyframes anim-time-bar {
     0% {
         width: 0;
     }