Add progress bar for current tasks

app/assets/stylesheets/dashboard/current_tasks.scss

@@ -5,6 +5,108 @@
   grid-column: 1 / span 9;
   grid-row: 1 / span 6;
 
+  .task-progress-container {
+    max-width: 300px;
+    min-width: 150px;
+    position: relative;
+    width: 100%;
+
+    // Example
+    //
+    //<div class="task-progress-container">
+    //  <div class="task-progress" style="padding-left: 45%"></div>
+    //  <div class="task-progress-label">t('...')</div>
+    //</div>
+
+    &::after {
+      @include font-small;
+      @include font-awesome;
+      content: "";
+      line-height: 18px;
+      position: absolute;
+      right: 8px;
+      top: 0;
+    }
+
+    .task-progress {
+      background: $brand-focus-light;
+      border-radius: $border-radius-tag;
+      display: flex;
+      height: 18px;
+      outline: $border-tertiary;
+      position: relative;
+
+      &::after {
+        background: $color-white;
+        content: "";
+        height: 18px;
+        width: 100%;
+      }
+    }
+
+    .task-progress-label {
+      @include font-small;
+      font-weight: bold;
+      height: 18px;
+      left: 0;
+      line-height: 18px;
+      padding-left: 8px;
+      position: absolute;
+      top: 0;
+      width: calc(100% - 30px);
+    }
+
+    &.overdue {
+      .task-progress {
+        background: $brand-danger-light;
+      }
+
+      .task-progress-label {
+        color: $brand-danger;
+      }
+
+      &::after {
+        color: $brand-danger;
+        content: $font-fas-exclamation-triangle;
+      }
+    }
+
+    &.completed {
+      .task-progress {
+        outline: $border-success;
+      }
+
+      .task-progress,
+      .task-progress::after {
+        background: $brand-success-light;
+      }
+
+      .task-progress-label {
+        color: $brand-success;
+      }
+
+      &::after {
+        color: $brand-success;
+        content: $font-fas-check;
+      }
+    }
+
+    &.locked {
+      .task-progress {
+        background: $color-white;
+      }
+
+      .task-progress-label {
+        color: $color-silver-chalice;
+      }
+
+      &::after {
+        color: $color-silver-chalice;
+        content: $font-fas-lock;
+      }
+    }
+  }
+
   .filter-container {
     height: 36px;
     width: 36px;

app/assets/stylesheets/shared_styles/constants/borders.scss

@@ -9,5 +9,6 @@ $border-secondary: 1px solid $color-silver-chalice;
 $border-tertiary: 1px solid $color-concrete;
 
 $border-focus: 1px solid $brand-focus;
+$border-success: 1px solid $brand-success;
 $border-danger: 1px solid $brand-danger;
 $border-transparent: 1px solid transparent;

config/locales/dashboard/en.yml

@@ -17,3 +17,8 @@ en:
         experiment: "Experiment"
         select_experiment: "Select Experiment"
         apply: "Apply"
+      progress_bar:
+        in_progress: "In progress: %{steps} / %{total_steps}"
+        overdue: "Overdue: %{steps} / %{total_steps}"
+        completed: "Completed"
+        locked: "Locked"