Add custom IBM progress loading bar

- Current out of the box bootstrap did not meet
  IBM style guide
- Custom gradient and animation added to loading bar
  to indicate progress

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I9d12c1709e7e344545a7ecfd211db0507fd40794
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
index 7490baa..3f503c8 100644
--- a/src/components/Global/LoadingBar.vue
+++ b/src/components/Global/LoadingBar.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="fade">
-    <b-progress v-if="!isLoadingComplete" height="0.4rem">
+    <b-progress v-if="!isLoadingComplete">
       <b-progress-bar
         striped
         animated
@@ -79,7 +79,7 @@
   bottom: -0.4rem;
   opacity: 1;
   transition: opacity $duration--moderate-01 $standard-easing--productive;
-
+  height: 0.4rem;
   &.fade-enter,
   &.fade-leave-to {
     opacity: 0;
diff --git a/src/env/assets/styles/_ibm.scss b/src/env/assets/styles/_ibm.scss
index bd2bc73..6839551 100644
--- a/src/env/assets/styles/_ibm.scss
+++ b/src/env/assets/styles/_ibm.scss
@@ -51,4 +51,35 @@
 // Validation icons
 $enable-validation-icons: true;
 $form-feedback-icon-valid: none;
-$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$danger}'  width='32' height='32' viewbox='0 0 32 32'><path fill='none' d='M0 0h32v32H0z'/><path d='M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm5.4 21L16 17.6 10.6 23 9 21.4l5.4-5.4L9 10.6 10.6 9l5.4 5.4L21.4 9l1.6 1.6-5.4 5.4 5.4 5.4-1.6 1.6z'/></svg>");
\ No newline at end of file
+$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$danger}'  width='32' height='32' viewbox='0 0 32 32'><path fill='none' d='M0 0h32v32H0z'/><path d='M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm5.4 21L16 17.6 10.6 23 9 21.4l5.4-5.4L9 10.6 10.6 9l5.4 5.4L21.4 9l1.6 1.6-5.4 5.4 5.4 5.4-1.6 1.6z'/></svg>");
+
+// Progress loading bar variables
+$loading-color-0: #552de5;
+$loading-color-50: $primary;
+$loading-color-100: #2dbde5;
+
+// Progress loading bar gradient
+.progress {
+  height: 0.8rem!important;
+}
+.progress-bar {
+  background: linear-gradient(
+    90deg,
+    $loading-color-0,
+    $loading-color-50,
+    $loading-color-100
+  );
+  background-size: 200% 200%;
+  animation: gradient 3s $standard-easing--productive infinite;
+}
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
\ No newline at end of file