anim-bar

.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
+  - sh -e /etc/init.d/xvfb start

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.