notification progressbar

src/app/shared/notifications/notification/notification.component.html

@@ -37,7 +37,6 @@
   </div>
 
   <div *ngIf="item.html">
-
     <div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">
       <ng-container *ngTemplateOutlet="html"></ng-container>
     </div>
@@ -45,9 +44,6 @@
     <ng-template #regularHtml>
       <div class="sn-content" [innerHTML]="html"></div>
     </ng-template>
-
-
-
   </div>
 
   <div class="sn-progress-loader" *ngIf="showProgressBar">

src/app/shared/notifications/notification/notification.component.scss

@@ -12,19 +12,22 @@
   left: 20px;
 }
 
-//.simple-notification.error { background: #F44336; }
-//.simple-notification.success { background: #8BC34A; }
-//.simple-notification.alert { background: #ffdb5b; }
-//.simple-notification.info { background: #03A9F4; }
-//.simple-notification.warn { background: #ffdb5b; }
-//
-//.simple-notification.success .sn-progress-loader span { background: #689F38; }
-//.simple-notification.error .sn-progress-loader span { background: #D32F2F; }
-//.simple-notification.alert .sn-progress-loader span { background: #edc242; }
-//.simple-notification.info .sn-progress-loader span { background: #0288D1; }
-//.simple-notification.warn .sn-progress-loader span { background: #edc242; }
-//.simple-notification.bare .sn-progress-loader span { background: #ccc; }
+.sn-progress-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  margin: 0 2px;
+}
+
+.sn-progress-loader span {
+  float: left;
+  height: 100%;
+  background: black;
+}
 
-//.simple-notification.warn div .sn-title,
-//.simple-notification.warn div .sn-content,
-//.simple-notification.warn div .sn-html { color: #444; }
+.alert-success .sn-progress-loader span { background: green; }
+.alert-danger .sn-progress-loader span { background: red; }
+.alert-info .sn-progress-loader span { background: blue; }
+.alert-warning .sn-progress-loader span { background: orange; }

src/app/shared/notifications/notification/notification.component.ts

@@ -19,7 +19,7 @@ import { fromBottomEnter, fromBottomInState, fromBottomLeave, fromBottomOutState
 import { fromRightEnter, fromRightInState, fromRightLeave, fromRightOutState } from '../../animations/fromRight';
 import { fromLeftEnter, fromLeftInState, fromLeftLeave, fromLeftOutState } from '../../animations/fromLeft';
 import { fromTopEnter, fromTopInState, fromTopLeave, fromTopOutState } from '../../animations/fromTop';
-import { fadeEnter, fadeInEnter, fadeInState, fadeLeave, fadeOutLeave, fadeOutState } from '../../animations/fade';
+import { fadeInEnter, fadeInState, fadeOutLeave, fadeOutState } from '../../animations/fade';
 import { NotificationAnimationsStatus } from '../models/notification-animations-type';
 
 @Component({
@@ -49,11 +49,12 @@ export class NotificationComponent implements OnInit, OnDestroy {
   public title: any;
   public content: any;
   public html: any;
+  public showProgressBar = false;
   public titleIsTemplate = false;
   public contentIsTemplate = false;
   public htmlIsTemplate = false;
 
-  // public progressWidth = 0;
+  public progressWidth = 0;
 
   private stopTime = false;
   private timer: any;
@@ -78,6 +79,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
 
     if (this.item.options.timeOut !== 0) {
       this.startTimeOut();
+      this.showProgressBar = true;
     }
 
     this.contentType(this.item.title, 'title');
@@ -103,9 +105,9 @@ export class NotificationComponent implements OnInit, OnDestroy {
       this.remove();
       // this.item.timeoutEnd!.emit();
     } else if (!this.stopTime) {
-      // if (this.showProgressBar) {
-      //   this.progressWidth += 100 / this.steps;
-      // }
+      if (this.showProgressBar) {
+        this.progressWidth += 100 / this.steps;
+      }
 
       this.timer = setTimeout(this.instance, (this.speed - this.diff));
     }