From 662569929d441a1a04f08f13066d7f594f204b83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Connor=20B=C3=A4r?= <connor-baer@users.noreply.github.com>
Date: Wed, 3 Jun 2020 17:07:21 +0200
Subject: [PATCH] feat(components): update design of ProgressBar (#602)

* refactor(components): migrate ProgressBar to TypeScript

* feat(components): add secondary variant for ProgressBar

* feat(components): add time-based ProgressBar

* feat(components): replace progress component in Carousel

* refactor(components): update wording

Co-authored-by: amelako <amela.kodzic@sumup.com>
Co-authored-by: fernandofleury <fernando.fleury@sumup.com>
---
 scripts/static-styles/config.js               |    2 +-
 src/__snapshots__/storyshots.spec.js.snap     | 1194 ++++++++++-------
 src/components/Carousel/Carousel.js           |   12 +-
 .../__snapshots__/Carousel.spec.js.snap       |  530 +++++---
 .../Carousel/components/Progress/Progress.js  |   81 --
 .../components/Progress/Progress.story.js     |   38 -
 .../__snapshots__/Progress.spec.js.snap       |  232 ----
 .../Carousel/components/Progress/index.js     |   18 -
 src/components/Carousel/index.js              |    2 -
 .../ProgressBar/ProgressBar.docs.mdx          |   38 +-
 src/components/ProgressBar/ProgressBar.js     |  151 ---
 .../ProgressBar/ProgressBar.spec.js           |   42 -
 .../ProgressBar.spec.tsx}                     |   48 +-
 .../ProgressBar/ProgressBar.story.js          |  108 --
 .../ProgressBar/ProgressBar.story.tsx         |   97 ++
 src/components/ProgressBar/ProgressBar.tsx    |  243 ++++
 .../__snapshots__/ProgressBar.spec.js.snap    |  131 --
 .../__snapshots__/ProgressBar.spec.tsx.snap   |  340 +++++
 .../ProgressBar/{index.js => index.ts}        |    2 +-
 19 files changed, 1810 insertions(+), 1499 deletions(-)
 delete mode 100644 src/components/Carousel/components/Progress/Progress.js
 delete mode 100644 src/components/Carousel/components/Progress/Progress.story.js
 delete mode 100644 src/components/Carousel/components/Progress/__snapshots__/Progress.spec.js.snap
 delete mode 100644 src/components/Carousel/components/Progress/index.js
 delete mode 100644 src/components/ProgressBar/ProgressBar.js
 delete mode 100644 src/components/ProgressBar/ProgressBar.spec.js
 rename src/components/{Carousel/components/Progress/Progress.spec.js => ProgressBar/ProgressBar.spec.tsx} (51%)
 delete mode 100644 src/components/ProgressBar/ProgressBar.story.js
 create mode 100644 src/components/ProgressBar/ProgressBar.story.tsx
 create mode 100644 src/components/ProgressBar/ProgressBar.tsx
 delete mode 100644 src/components/ProgressBar/__snapshots__/ProgressBar.spec.js.snap
 create mode 100644 src/components/ProgressBar/__snapshots__/ProgressBar.spec.tsx.snap
 rename src/components/ProgressBar/{index.js => index.ts} (93%)

diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js
index 7328cf7ae7..fe1aa8eafa 100644
--- a/scripts/static-styles/config.js
+++ b/scripts/static-styles/config.js
@@ -171,7 +171,7 @@ export default {
     // }),
     // TODO: Need to eliminate dynamic styles.
     // getComponentInfo(ProgressBar, {
-    //   size: [ProgressBar.KILO, ProgressBar.MEGA, ProgressBar.GIGA]
+    //   size: ['kilo', 'mega', 'giga']
     // }),
     getComponentInfo(RadioButton),
     getComponentInfo(Select, {
diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index f9593f9baf..3d141dda57 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -5299,13 +5299,13 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
 
   100% {
     width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
   }
 }
 
-.circuit-59 {
+.circuit-61 {
   width: 100%;
   height: auto;
   position: relative;
@@ -5436,7 +5436,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
   z-index: -2;
 }
 
-.circuit-57 {
+.circuit-59 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -5486,21 +5486,48 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
   }
 }
 
-.circuit-41 {
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
+.circuit-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
 
-.circuit-41:after {
+.circuit-41 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 4px;
+}
+
+.circuit-41::after {
   content: '';
   display: block;
-  background-color: #0F131A;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-41::after {
+  background-color: #212933;
+}
+
+.circuit-41::after {
   -webkit-animation-name: animation-0;
   animation-name: animation-0;
   -webkit-animation-duration: 5640ms;
@@ -5509,12 +5536,17 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
   animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  height: 100%;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.circuit-42 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
 }
 
-.circuit-55 {
+.circuit-57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5531,12 +5563,12 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-55 {
+  .circuit-57 {
     margin-left: 12px;
   }
 }
 
-.circuit-46 {
+.circuit-48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5576,54 +5608,54 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
   margin-left: 8px;
 }
 
-.circuit-46:focus {
+.circuit-48:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-46:focus::-moz-focus-inner {
+.circuit-48:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-46:disabled,
-.circuit-46[disabled] {
+.circuit-48:disabled,
+.circuit-48[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-46:hover {
+.circuit-48:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-46:active {
+.circuit-48:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-46:first-of-type {
+.circuit-48:first-of-type {
   margin-left: 0;
 }
 
-.circuit-46:active,
-.circuit-46:focus,
-.circuit-46:hover {
+.circuit-48:active,
+.circuit-48:focus,
+.circuit-48:hover {
   padding: 0;
 }
 
 @media (max-width:479px) {
-  .circuit-46 {
+  .circuit-48 {
     width: 24px;
     height: 24px;
   }
 
-  .circuit-46 svg {
+  .circuit-48 svg {
     width: 25%;
   }
 }
 
-.circuit-43 {
+.circuit-45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5643,7 +5675,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
 >
   <div
     aria-label="gallery"
-    class="circuit-59 circuit-60"
+    class="circuit-61 circuit-62"
   >
     <div
       class="circuit-36 circuit-37"
@@ -5719,7 +5751,7 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
       </div>
     </div>
     <div
-      class="circuit-57 circuit-58"
+      class="circuit-59 circuit-60"
     >
       <p
         class="circuit-38 circuit-39 circuit-40"
@@ -5729,17 +5761,27 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
         3
       </p>
       <div
-        class="circuit-41 circuit-42"
-      />
+        class="circuit-43 circuit-44"
+      >
+        <span
+          aria-labelledby="progress-bar_2"
+          class="circuit-41"
+          loop=""
+        />
+        <span
+          class="circuit-42"
+          id="progress-bar_2"
+        />
+      </div>
       <div
-        class="circuit-55 circuit-56"
+        class="circuit-57 circuit-58"
       >
         <button
           aria-label="pause"
-          class="circuit-45 circuit-46"
+          class="circuit-47 circuit-48"
         >
           <div
-            class="circuit-43 circuit-44"
+            class="circuit-45 circuit-46"
           >
             <svg
               fill="none"
@@ -5759,10 +5801,10 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
         </button>
         <button
           aria-label="previous"
-          class="circuit-45 circuit-46"
+          class="circuit-47 circuit-48"
         >
           <div
-            class="circuit-43 circuit-44"
+            class="circuit-45 circuit-46"
           >
             <svg
               fill="none"
@@ -5783,10 +5825,10 @@ exports[`Storyshots Components/Carousel Stateful 1`] = `
         </button>
         <button
           aria-label="next"
-          class="circuit-45 circuit-46"
+          class="circuit-47 circuit-48"
         >
           <div
-            class="circuit-43 circuit-44"
+            class="circuit-45 circuit-46"
           >
             <svg
               fill="none"
@@ -6030,87 +6072,6 @@ exports[`Storyshots Components/Carousel/Buttons All Buttons 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components/Carousel/Progress Base 1`] = `
-@keyframes animation-0 {
-  0% {
-    width: 0%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    width: 0%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
-  }
-}
-
-.circuit-0 {
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
-}
-
-.circuit-0:after {
-  content: '';
-  display: block;
-  background-color: #0F131A;
-  -webkit-animation-name: animation-0;
-  animation-name: animation-0;
-  -webkit-animation-duration: 5000ms;
-  animation-duration: 5000ms;
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-  height: 100%;
-}
-
-<div
-  style="width: 60vw;"
->
-  <div
-    class="circuit-0 circuit-1"
-  />
-</div>
-`;
-
 exports[`Storyshots Components/Carousel/Slide Only Image 1`] = `
 .circuit-6 {
   width: 100%;
@@ -9048,8 +9009,15 @@ exports[`Storyshots Components/Popover Base 1`] = `
 </div>
 `;
 
-exports[`Storyshots Components/ProgressBar Base 1`] = `
-.circuit-4 {
+exports[`Storyshots Components/ProgressBar Labelled 1`] = `
+HTMLCollection [
+  .circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9058,19 +9026,15 @@ exports[`Storyshots Components/ProgressBar Base 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  margin-bottom: 16px;
-  min-width: 500px;
-  max-width: 90%;
 }
 
 .circuit-0 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
+  background-color: #EEF0F2;
+  border-radius: 999999px;
   position: relative;
   width: 100%;
-  height: 8px;
   overflow: hidden;
+  height: 8px;
 }
 
 .circuit-0::after {
@@ -9080,44 +9044,48 @@ exports[`Storyshots Components/ProgressBar Base 1`] = `
   top: 0;
   bottom: 0;
   left: 0;
-  width: 30%;
   background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
 }
 
-.circuit-2 {
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  width: 30%;
+}
+
+<div
+    class="circuit-2"
+  >
+    <span
+      aria-labelledby="progress-bar_28"
+      aria-valuemax="10"
+      aria-valuemin="0"
+      aria-valuenow="3"
+      class="circuit-0"
+      max="10"
+      role="progressbar"
+      value="3"
+    />
+    <span
+      class="circuit-1"
+      id="progress-bar_28"
+    >
+      3/10
+    </span>
+  </div>,
+  .circuit-1 {
   font-size: 13px;
   line-height: 20px;
   margin-left: 8px;
 }
 
-<div
-  class="circuit-4 circuit-5"
->
-  <span
-    aria-labelledby="progress-bar_24"
-    aria-valuemax="10"
-    aria-valuemin="0"
-    aria-valuenow="3"
-    class="circuit-0 circuit-1"
-    max="10"
-    role="progressbar"
-    value="3"
-  />
-  <span
-    class="circuit-2 circuit-3"
-    id="progress-bar_24"
-  />
-</div>
-`;
-
-exports[`Storyshots Components/ProgressBar Size 1`] = `
-HTMLCollection [
-  .circuit-4 {
+.circuit-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9126,25 +9094,15 @@ HTMLCollection [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  margin-bottom: 16px;
-  min-width: 500px;
-  max-width: 90%;
-}
-
-.circuit-2 {
-  font-size: 13px;
-  line-height: 20px;
-  margin-left: 8px;
 }
 
 .circuit-0 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
+  background-color: #EEF0F2;
+  border-radius: 999999px;
   position: relative;
   width: 100%;
-  height: 8px;
   overflow: hidden;
+  height: 8px;
 }
 
 .circuit-0::after {
@@ -9154,36 +9112,53 @@ HTMLCollection [
   top: 0;
   bottom: 0;
   left: 0;
-  width: 70%;
   background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  width: 30%;
 }
 
 <div
-    class="circuit-4 circuit-5"
+    class="circuit-2"
   >
     <span
-      aria-labelledby="progress-bar_27"
+      aria-labelledby="progress-bar_29"
       aria-valuemax="10"
       aria-valuemin="0"
-      aria-valuenow="7"
-      class="circuit-0 circuit-1"
+      aria-valuenow="3"
+      class="circuit-0"
       max="10"
       role="progressbar"
-      value="7"
+      value="3"
     />
     <span
-      class="circuit-2 circuit-3"
-      id="progress-bar_27"
+      class="circuit-1"
+      id="progress-bar_29"
     >
-      70%
+      30%
     </span>
   </div>,
-  .circuit-4 {
+]
+`;
+
+exports[`Storyshots Components/ProgressBar Sizes 1`] = `
+HTMLCollection [
+  .circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9192,25 +9167,15 @@ HTMLCollection [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  margin-bottom: 16px;
-  min-width: 500px;
-  max-width: 90%;
-}
-
-.circuit-2 {
-  font-size: 13px;
-  line-height: 20px;
-  margin-left: 8px;
 }
 
 .circuit-0 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
+  background-color: #EEF0F2;
+  border-radius: 999999px;
   position: relative;
   width: 100%;
-  height: 16px;
   overflow: hidden;
+  height: 4px;
 }
 
 .circuit-0::after {
@@ -9220,36 +9185,48 @@ HTMLCollection [
   top: 0;
   bottom: 0;
   left: 0;
-  width: 70%;
   background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  width: 30%;
 }
 
 <div
-    class="circuit-4 circuit-5"
+    class="circuit-2"
   >
     <span
-      aria-labelledby="progress-bar_28"
+      aria-labelledby="progress-bar_32"
       aria-valuemax="10"
       aria-valuemin="0"
-      aria-valuenow="7"
-      class="circuit-0 circuit-1"
+      aria-valuenow="3"
+      class="circuit-0"
       max="10"
       role="progressbar"
-      value="7"
+      value="3"
     />
     <span
-      class="circuit-2 circuit-3"
-      id="progress-bar_28"
+      class="circuit-1"
+      id="progress-bar_32"
     >
-      70%
+      byte
     </span>
   </div>,
-  .circuit-4 {
+  .circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9258,25 +9235,83 @@ HTMLCollection [
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  margin-bottom: 16px;
-  min-width: 500px;
-  max-width: 90%;
 }
 
-.circuit-2 {
+.circuit-0 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 8px;
+}
+
+.circuit-0::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  width: 30%;
+}
+
+<div
+    class="circuit-2"
+  >
+    <span
+      aria-labelledby="progress-bar_33"
+      aria-valuemax="10"
+      aria-valuemin="0"
+      aria-valuenow="3"
+      class="circuit-0"
+      max="10"
+      role="progressbar"
+      value="3"
+    />
+    <span
+      class="circuit-1"
+      id="progress-bar_33"
+    >
+      kilo
+    </span>
+  </div>,
+  .circuit-1 {
   font-size: 13px;
   line-height: 20px;
   margin-left: 8px;
 }
 
+.circuit-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
 .circuit-0 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
+  background-color: #EEF0F2;
+  border-radius: 999999px;
   position: relative;
   width: 100%;
-  height: 32px;
   overflow: hidden;
+  height: 16px;
 }
 
 .circuit-0::after {
@@ -9286,40 +9321,241 @@ HTMLCollection [
   top: 0;
   bottom: 0;
   left: 0;
-  width: 70%;
   background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  width: 30%;
 }
 
 <div
-    class="circuit-4 circuit-5"
+    class="circuit-2"
   >
     <span
-      aria-labelledby="progress-bar_29"
+      aria-labelledby="progress-bar_34"
       aria-valuemax="10"
       aria-valuemin="0"
-      aria-valuenow="7"
-      class="circuit-0 circuit-1"
+      aria-valuenow="3"
+      class="circuit-0"
       max="10"
       role="progressbar"
-      value="7"
+      value="3"
     />
     <span
-      class="circuit-2 circuit-3"
-      id="progress-bar_29"
+      class="circuit-1"
+      id="progress-bar_34"
     >
-      70%
+      mega
     </span>
   </div>,
 ]
 `;
 
-exports[`Storyshots Components/ProgressBar With Fraction 1`] = `
-.circuit-4 {
+exports[`Storyshots Components/ProgressBar Steps 1`] = `
+.circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.circuit-0 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 8px;
+}
+
+.circuit-0::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  width: 30%;
+}
+
+<div
+  class="circuit-2"
+>
+  <span
+    aria-labelledby="progress-bar_26"
+    aria-valuemax="10"
+    aria-valuemin="0"
+    aria-valuenow="3"
+    class="circuit-0"
+    max="10"
+    role="progressbar"
+    value="3"
+  />
+  <span
+    class="circuit-1"
+    id="progress-bar_26"
+  />
+</div>
+`;
+
+exports[`Storyshots Components/ProgressBar Timer 1`] = `
+@keyframes animation-0 {
+  0% {
+    width: 0%;
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  90% {
+    width: 100%;
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  100% {
+    width: 100%;
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+}
+
+@keyframes animation-0 {
+  0% {
+    width: 0%;
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  90% {
+    width: 100%;
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  100% {
+    width: 100%;
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+}
+
+.circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.circuit-0 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 8px;
+}
+
+.circuit-0::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  -webkit-animation-name: animation-0;
+  animation-name: animation-0;
+  -webkit-animation-duration: 3000ms;
+  animation-duration: 3000ms;
+  -webkit-animation-play-state: running;
+  animation-play-state: running;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+<div
+  class="circuit-2"
+>
+  <span
+    aria-labelledby="progress-bar_27"
+    class="circuit-0"
+    loop=""
+  />
+  <span
+    class="circuit-1"
+    id="progress-bar_27"
+  />
+</div>
+`;
+
+exports[`Storyshots Components/ProgressBar Variants 1`] = `
+HTMLCollection [
+  .circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9328,25 +9564,15 @@ exports[`Storyshots Components/ProgressBar With Fraction 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  margin-bottom: 16px;
-  min-width: 500px;
-  max-width: 90%;
-}
-
-.circuit-2 {
-  font-size: 13px;
-  line-height: 20px;
-  margin-left: 8px;
 }
 
 .circuit-0 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
+  background-color: #EEF0F2;
+  border-radius: 999999px;
   position: relative;
   width: 100%;
-  height: 8px;
   overflow: hidden;
+  height: 8px;
 }
 
 .circuit-0::after {
@@ -9356,39 +9582,48 @@ exports[`Storyshots Components/ProgressBar With Fraction 1`] = `
   top: 0;
   bottom: 0;
   left: 0;
-  width: 70%;
   background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  width: 30%;
 }
 
 <div
-  class="circuit-4 circuit-5"
->
-  <span
-    aria-labelledby="progress-bar_25"
-    aria-valuemax="10"
-    aria-valuemin="0"
-    aria-valuenow="7"
-    class="circuit-0 circuit-1"
-    max="10"
-    role="progressbar"
-    value="7"
-  />
-  <span
-    class="circuit-2 circuit-3"
-    id="progress-bar_25"
+    class="circuit-2"
   >
-    7/10
-  </span>
-</div>
-`;
+    <span
+      aria-labelledby="progress-bar_30"
+      aria-valuemax="10"
+      aria-valuemin="0"
+      aria-valuenow="3"
+      class="circuit-0"
+      max="10"
+      role="progressbar"
+      value="3"
+    />
+    <span
+      class="circuit-1"
+      id="progress-bar_30"
+    >
+      primary
+    </span>
+  </div>,
+  .circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
 
-exports[`Storyshots Components/ProgressBar With Percentage 1`] = `
-.circuit-4 {
+.circuit-2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -9397,25 +9632,15 @@ exports[`Storyshots Components/ProgressBar With Percentage 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  margin-bottom: 16px;
-  min-width: 500px;
-  max-width: 90%;
-}
-
-.circuit-2 {
-  font-size: 13px;
-  line-height: 20px;
-  margin-left: 8px;
 }
 
 .circuit-0 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
+  background-color: #EEF0F2;
+  border-radius: 999999px;
   position: relative;
   width: 100%;
-  height: 8px;
   overflow: hidden;
+  height: 8px;
 }
 
 .circuit-0::after {
@@ -9425,35 +9650,42 @@ exports[`Storyshots Components/ProgressBar With Percentage 1`] = `
   top: 0;
   bottom: 0;
   left: 0;
-  width: 70%;
   background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #212933;
+}
+
+.circuit-0::after {
+  width: 30%;
 }
 
 <div
-  class="circuit-4 circuit-5"
->
-  <span
-    aria-labelledby="progress-bar_26"
-    aria-valuemax="10"
-    aria-valuemin="0"
-    aria-valuenow="7"
-    class="circuit-0 circuit-1"
-    max="10"
-    role="progressbar"
-    value="7"
-  />
-  <span
-    class="circuit-2 circuit-3"
-    id="progress-bar_26"
+    class="circuit-2"
   >
-    70%
-  </span>
-</div>
+    <span
+      aria-labelledby="progress-bar_31"
+      aria-valuemax="10"
+      aria-valuemin="0"
+      aria-valuenow="3"
+      class="circuit-0"
+      max="10"
+      role="progressbar"
+      value="3"
+    />
+    <span
+      class="circuit-1"
+      id="progress-bar_31"
+    >
+      secondary
+    </span>
+  </div>,
+]
 `;
 
 exports[`Storyshots Components/Sidebar Base 1`] = `
@@ -10082,7 +10314,7 @@ exports[`Storyshots Components/Spinner Base 1`] = `
 `;
 
 exports[`Storyshots Components/Step Form 1`] = `
-.circuit-27 {
+.circuit-24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10115,51 +10347,57 @@ exports[`Storyshots Components/Step Form 1`] = `
   padding: 8px calc(24px - 1px);
 }
 
-.circuit-27:focus {
+.circuit-24:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-27:focus::-moz-focus-inner {
+.circuit-24:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-27:disabled,
-.circuit-27[disabled] {
+.circuit-24:disabled,
+.circuit-24[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-27:hover {
+.circuit-24:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-27:active {
+.circuit-24:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-7 {
+.circuit-2 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-4 {
   font-size: 13px;
   line-height: 20px;
   display: block;
 }
 
-.circuit-13 {
+.circuit-10 {
   color: #212933;
   display: block;
   position: relative;
   margin-bottom: 16px;
 }
 
-label > .circuit-13,
-label + .circuit-13 {
+label > .circuit-10,
+label + .circuit-10 {
   margin-top: 4px;
 }
 
-.circuit-11 {
+.circuit-8 {
   opacity: 0;
   -webkit-transition: opacity 200ms ease-in-out;
   transition: opacity 200ms ease-in-out;
@@ -10187,7 +10425,7 @@ label + .circuit-13 {
   }
 }
 
-.circuit-9 {
+.circuit-6 {
   background-color: #FFFFFF;
   border-width: 1px;
   border-style: solid;
@@ -10204,49 +10442,37 @@ label + .circuit-13 {
   padding-right: calc( 12px + 16px + 12px );
 }
 
-.circuit-9:focus,
-.circuit-9:active {
+.circuit-6:focus,
+.circuit-6:active {
   border: 1px solid #3388FF;
   outline: none;
 }
 
-.circuit-9::-webkit-input-placeholder {
+.circuit-6::-webkit-input-placeholder {
   color: #9DA7B1;
   -webkit-transition: color 200ms ease-in-out;
   transition: color 200ms ease-in-out;
 }
 
-.circuit-9::-moz-placeholder {
+.circuit-6::-moz-placeholder {
   color: #9DA7B1;
   -webkit-transition: color 200ms ease-in-out;
   transition: color 200ms ease-in-out;
 }
 
-.circuit-9:-ms-input-placeholder {
+.circuit-6:-ms-input-placeholder {
   color: #9DA7B1;
   -webkit-transition: color 200ms ease-in-out;
   transition: color 200ms ease-in-out;
 }
 
-.circuit-9::placeholder {
+.circuit-6::placeholder {
   color: #9DA7B1;
   -webkit-transition: color 200ms ease-in-out;
   transition: color 200ms ease-in-out;
 }
 
 .circuit-3 {
-  font-size: 13px;
-  line-height: 20px;
-  margin-left: 8px;
-}
-
-.circuit-28 {
-  margin: 0 auto;
-  width: 90%;
-  max-width: 300px;
-}
-
-.circuit-5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -10255,17 +10481,21 @@ label + .circuit-13 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  margin-bottom: 16px;
+}
+
+.circuit-25 {
+  margin: 0 auto;
+  width: 90%;
+  max-width: 300px;
 }
 
 .circuit-1 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
+  background-color: #EEF0F2;
+  border-radius: 999999px;
   position: relative;
   width: 100%;
-  height: 8px;
   overflow: hidden;
+  height: 8px;
 }
 
 .circuit-1::after {
@@ -10275,17 +10505,23 @@ label + .circuit-13 {
   top: 0;
   bottom: 0;
   left: 0;
-  width: 33.33333333333333%;
   background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
   -webkit-transition: width 0.05s ease-out;
   transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-1::after {
+  background-color: #3388FF;
+}
+
+.circuit-1::after {
+  width: 33.33333333333333%;
 }
 
 <div
-  class="circuit-28 circuit-29"
+  class="circuit-25 circuit-26"
 >
   <h2
     class="circuit-0"
@@ -10296,74 +10532,74 @@ label + .circuit-13 {
     3
   </h2>
   <div
-    class="circuit-5 circuit-6"
+    class="circuit-3"
   >
     <span
-      aria-labelledby="progress-bar_52"
+      aria-labelledby="progress-bar_57"
       aria-valuemax="3"
       aria-valuemin="0"
       aria-valuenow="1"
-      class="circuit-1 circuit-2"
+      class="circuit-1"
       max="3"
       role="progressbar"
       value="1"
     />
     <span
-      class="circuit-3 circuit-4"
-      id="progress-bar_52"
+      class="circuit-2"
+      id="progress-bar_57"
     />
   </div>
   <section>
     <label
-      class="circuit-7 circuit-8"
+      class="circuit-4 circuit-5"
       for="first"
     >
       First Name
     </label>
     <label
-      class="circuit-7 circuit-8"
+      class="circuit-4 circuit-5"
       for="first"
     >
       <div
-        class="circuit-13 circuit-14"
+        class="circuit-10 circuit-11"
       >
         <input
           aria-invalid="false"
-          class="circuit-9 circuit-10"
+          class="circuit-6 circuit-7"
           id="first"
           placeholder="John"
         />
         <div
-          class="circuit-11 circuit-12"
+          class="circuit-8 circuit-9"
         />
       </div>
     </label>
     <label
-      class="circuit-7 circuit-8"
+      class="circuit-4 circuit-5"
       for="second"
     >
       Second Name
     </label>
     <label
-      class="circuit-7 circuit-8"
+      class="circuit-4 circuit-5"
       for="second"
     >
       <div
-        class="circuit-13 circuit-14"
+        class="circuit-10 circuit-11"
       >
         <input
           aria-invalid="false"
-          class="circuit-9 circuit-10"
+          class="circuit-6 circuit-7"
           id="second"
           placeholder="Doe"
         />
         <div
-          class="circuit-11 circuit-12"
+          class="circuit-8 circuit-9"
         />
       </div>
     </label>
     <button
-      class="circuit-27"
+      class="circuit-24"
     >
       Next
     </button>
@@ -13977,14 +14213,14 @@ exports[`Storyshots Forms/Checkbox Base 1`] = `
 >
   <input
     class="circuit-0 circuit-1"
-    id="checkbox_1"
+    id="checkbox_3"
     name="base"
     type="checkbox"
     value="true"
   />
   <label
     class="circuit-2 circuit-3"
-    for="checkbox_1"
+    for="checkbox_3"
   >
     Unchecked
     <svg
@@ -14120,7 +14356,7 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = `
   <input
     class="circuit-0 circuit-1"
     disabled=""
-    id="checkbox_3"
+    id="checkbox_5"
     name="disabled"
     type="checkbox"
     value="disabled"
@@ -14128,7 +14364,7 @@ exports[`Storyshots Forms/Checkbox Disabled 1`] = `
   <label
     class="circuit-2 circuit-3"
     disabled=""
-    for="checkbox_3"
+    for="checkbox_5"
   >
     Unchecked
     <svg
@@ -14295,14 +14531,14 @@ exports[`Storyshots Forms/Checkbox Invalid 1`] = `
 >
   <input
     class="circuit-0 circuit-1"
-    id="checkbox_2"
+    id="checkbox_4"
     name="invalid"
     type="checkbox"
     value="invalid"
   />
   <label
     class="circuit-2 circuit-3"
-    for="checkbox_2"
+    for="checkbox_4"
   >
     Unchecked
     <svg
@@ -14425,14 +14661,14 @@ HTMLCollection [
   >
     <input
       class="circuit-0 circuit-1"
-      id="checkbox_4"
+      id="checkbox_6"
       name="fruits"
       type="checkbox"
       value="apples"
     />
     <label
       class="circuit-2 circuit-3"
-      for="checkbox_4"
+      for="checkbox_6"
     >
       Apples
       <svg
@@ -14546,14 +14782,14 @@ HTMLCollection [
   >
     <input
       class="circuit-0 circuit-1"
-      id="checkbox_5"
+      id="checkbox_7"
       name="fruits"
       type="checkbox"
       value="bananas"
     />
     <label
       class="circuit-2 circuit-3"
-      for="checkbox_5"
+      for="checkbox_7"
     >
       Bananas
       <svg
@@ -14667,14 +14903,14 @@ HTMLCollection [
   >
     <input
       class="circuit-0 circuit-1"
-      id="checkbox_6"
+      id="checkbox_8"
       name="fruits"
       type="checkbox"
       value="oranges"
     />
     <label
       class="circuit-2 circuit-3"
-      for="checkbox_6"
+      for="checkbox_8"
     >
       Oranges
       <svg
@@ -14962,7 +15198,7 @@ label + .circuit-6 {
 
 <label
   class="circuit-8 circuit-9"
-  for="12"
+  for="14"
 >
   <span
     class="circuit-0 circuit-1"
@@ -14975,7 +15211,7 @@ label + .circuit-6 {
     <input
       aria-invalid="false"
       class="circuit-2 circuit-3"
-      id="12"
+      id="14"
       placeholder="Placeholder"
     />
     <div
@@ -15056,7 +15292,7 @@ label + .circuit-4 {
 
 <label
   class="circuit-6 circuit-7"
-  for="20"
+  for="22"
 >
   <span
     class="circuit-0 circuit-1"
@@ -15071,7 +15307,7 @@ label + .circuit-4 {
       aria-invalid="false"
       class="circuit-2 circuit-3"
       disabled=""
-      id="20"
+      id="22"
       placeholder="Placeholder"
       value="Some value"
     />
@@ -15164,7 +15400,7 @@ label + .circuit-4 {
 <div>
   <label
     class="circuit-6 circuit-7"
-    for="input_22"
+    for="input_24"
   >
     <div
       class="circuit-4 circuit-5"
@@ -15172,7 +15408,7 @@ label + .circuit-4 {
       <input
         aria-invalid="false"
         class="circuit-0 circuit-1"
-        id="input_22"
+        id="input_24"
         placeholder="First"
       />
       <div
@@ -15182,7 +15418,7 @@ label + .circuit-4 {
   </label>
   <label
     class="circuit-6 circuit-7"
-    for="input_23"
+    for="input_25"
   >
     <div
       class="circuit-4 circuit-5"
@@ -15190,7 +15426,7 @@ label + .circuit-4 {
       <input
         aria-invalid="false"
         class="circuit-0 circuit-1"
-        id="input_23"
+        id="input_25"
         placeholder="Second"
       />
       <div
@@ -15353,7 +15589,7 @@ label + .circuit-9 {
 
 <label
     class="circuit-11 circuit-12"
-    for="15"
+    for="17"
   >
     <span
       class="circuit-0 circuit-1"
@@ -15366,7 +15602,7 @@ label + .circuit-9 {
       <input
         aria-invalid="true"
         class="circuit-2 circuit-3"
-        id="15"
+        id="17"
         placeholder="Placeholder"
       />
       <div
@@ -15506,7 +15742,7 @@ label + .circuit-7 {
 
 <label
     class="circuit-9 circuit-10"
-    for="16"
+    for="18"
   >
     <span
       class="circuit-0 circuit-1"
@@ -15519,7 +15755,7 @@ label + .circuit-7 {
       <input
         aria-invalid="true"
         class="circuit-2 circuit-3"
-        id="16"
+        id="18"
         placeholder="Placeholder"
       />
       <div
@@ -15633,7 +15869,7 @@ label + .circuit-6 {
 
 <label
   class="circuit-8 circuit-9"
-  for="19"
+  for="21"
 >
   <span
     class="circuit-0 circuit-1"
@@ -15646,7 +15882,7 @@ label + .circuit-6 {
     <input
       aria-invalid="false"
       class="circuit-2 circuit-3"
-      id="19"
+      id="21"
       placeholder="Placeholder"
     />
     <div
@@ -15739,7 +15975,7 @@ label + .circuit-6 {
 
 <label
   class="circuit-8 circuit-9"
-  for="21"
+  for="23"
 >
   <span
     class="circuit-0 circuit-1"
@@ -15752,7 +15988,7 @@ label + .circuit-6 {
     <input
       aria-invalid="false"
       class="circuit-2 circuit-3"
-      id="21"
+      id="23"
       placeholder="Placeholder"
     />
     <div
@@ -15894,7 +16130,7 @@ label + .circuit-9 {
 
 <label
     class="circuit-11 circuit-12"
-    for="13"
+    for="15"
   >
     <span
       class="circuit-0 circuit-1"
@@ -15907,7 +16143,7 @@ label + .circuit-9 {
       <input
         aria-invalid="false"
         class="circuit-2 circuit-3"
-        id="13"
+        id="15"
         placeholder="Placeholder"
       />
       <div
@@ -16034,7 +16270,7 @@ label + .circuit-7 {
 
 <label
     class="circuit-9 circuit-10"
-    for="14"
+    for="16"
   >
     <span
       class="circuit-0 circuit-1"
@@ -16047,7 +16283,7 @@ label + .circuit-7 {
       <input
         aria-invalid="false"
         class="circuit-2 circuit-3"
-        id="14"
+        id="16"
         placeholder="Placeholder"
       />
       <div
@@ -16235,7 +16471,7 @@ label + .circuit-9 {
 
 <label
     class="circuit-11 circuit-12"
-    for="17"
+    for="19"
   >
     <span
       class="circuit-0 circuit-1"
@@ -16248,7 +16484,7 @@ label + .circuit-9 {
       <input
         aria-invalid="false"
         class="circuit-2 circuit-3"
-        id="17"
+        id="19"
         placeholder="Placeholder"
       />
       <div
@@ -16388,7 +16624,7 @@ label + .circuit-7 {
 
 <label
     class="circuit-9 circuit-10"
-    for="18"
+    for="20"
   >
     <span
       class="circuit-0 circuit-1"
@@ -16401,7 +16637,7 @@ label + .circuit-7 {
       <input
         aria-invalid="false"
         class="circuit-2 circuit-3"
-        id="18"
+        id="20"
         placeholder="Placeholder"
       />
       <div
@@ -16660,7 +16896,7 @@ label + .circuit-8 {
 
 <label
   class="circuit-10 circuit-11"
-  for="input_7"
+  for="input_9"
 >
   <span
     class="circuit-0 circuit-1"
@@ -16678,7 +16914,7 @@ label + .circuit-8 {
     <input
       aria-invalid="false"
       class="circuit-4 circuit-5"
-      id="input_7"
+      id="input_9"
       placeholder="123.45"
       type="text"
       value=""
@@ -16801,7 +17037,7 @@ label + .circuit-8 {
 
 <label
     class="circuit-10 circuit-11"
-    for="input_8"
+    for="input_10"
   >
     <span
       class="circuit-0 circuit-1"
@@ -16819,7 +17055,7 @@ label + .circuit-8 {
       <input
         aria-invalid="false"
         class="circuit-4 circuit-5"
-        id="input_8"
+        id="input_10"
         placeholder="1,234.50"
         type="text"
         value=""
@@ -16938,7 +17174,7 @@ label + .circuit-8 {
 
 <label
     class="circuit-10 circuit-11"
-    for="input_9"
+    for="input_11"
   >
     <span
       class="circuit-0 circuit-1"
@@ -16956,7 +17192,7 @@ label + .circuit-8 {
       <input
         aria-invalid="false"
         class="circuit-4 circuit-5"
-        id="input_9"
+        id="input_11"
         placeholder="1,234.50"
         type="text"
         value=""
@@ -17080,7 +17316,7 @@ label + .circuit-8 {
 
 <label
     class="circuit-10 circuit-11"
-    for="input_10"
+    for="input_12"
   >
     <span
       class="circuit-0 circuit-1"
@@ -17098,7 +17334,7 @@ label + .circuit-8 {
       <input
         aria-invalid="false"
         class="circuit-4 circuit-5"
-        id="input_10"
+        id="input_12"
         placeholder="1,234.50"
         type="text"
         value=""
@@ -17217,7 +17453,7 @@ label + .circuit-8 {
 
 <label
     class="circuit-10 circuit-11"
-    for="input_11"
+    for="input_13"
   >
     <span
       class="circuit-0 circuit-1"
@@ -17235,7 +17471,7 @@ label + .circuit-8 {
       <input
         aria-invalid="false"
         class="circuit-4 circuit-5"
-        id="input_11"
+        id="input_13"
         placeholder="1,234.50"
         type="text"
         value=""
@@ -17328,7 +17564,7 @@ label + .circuit-5 {
 
 <label
   class="circuit-7 circuit-8"
-  for="36"
+  for="41"
 >
   <span
     class="circuit-0 circuit-1"
@@ -17357,7 +17593,7 @@ label + .circuit-5 {
     <input
       aria-invalid="false"
       class="circuit-3 circuit-4"
-      id="36"
+      id="41"
       placeholder="Search..."
       type="text"
       value=""
@@ -17447,7 +17683,7 @@ label + .circuit-5 {
 <div>
   <label
     class="circuit-7 circuit-8"
-    for="38"
+    for="43"
   >
     <span
       class="circuit-0 circuit-1"
@@ -17476,7 +17712,7 @@ label + .circuit-5 {
       <input
         aria-invalid="false"
         class="circuit-3 circuit-4"
-        id="38"
+        id="43"
         placeholder="Search..."
         type="text"
         value=""
@@ -17569,7 +17805,7 @@ label + .circuit-5 {
 
 <label
   class="circuit-7 circuit-8"
-  for="37"
+  for="42"
 >
   <span
     class="circuit-0 circuit-1"
@@ -17600,7 +17836,7 @@ label + .circuit-5 {
       aria-invalid="false"
       class="circuit-3 circuit-4"
       disabled=""
-      id="37"
+      id="42"
       placeholder="Search..."
       type="text"
       value=""
@@ -17674,7 +17910,7 @@ HTMLCollection [
 
 <input
     class="circuit-0 circuit-1"
-    id="radio-button_30"
+    id="radio-button_35"
     name="radio"
     type="radio"
     value="radio"
@@ -17728,7 +17964,7 @@ HTMLCollection [
 
 <label
     class="circuit-0 circuit-1"
-    for="radio-button_30"
+    for="radio-button_35"
   >
     Unchecked
   </label>,
@@ -17773,7 +18009,7 @@ HTMLCollection [
 <input
     class="circuit-0 circuit-1"
     disabled=""
-    id="radio-button_32"
+    id="radio-button_37"
     name="disabled"
     type="radio"
     value="disabled"
@@ -17846,7 +18082,7 @@ HTMLCollection [
 <label
     class="circuit-0 circuit-1"
     disabled=""
-    for="radio-button_32"
+    for="radio-button_37"
   >
     Disabled
   </label>,
@@ -17890,7 +18126,7 @@ HTMLCollection [
 
 <input
     class="circuit-0 circuit-1"
-    id="radio-button_31"
+    id="radio-button_36"
     name="invalid"
     type="radio"
     value="invalid"
@@ -17953,7 +18189,7 @@ HTMLCollection [
 
 <label
     class="circuit-0 circuit-1"
-    for="radio-button_31"
+    for="radio-button_36"
   >
     Error
   </label>,
@@ -18048,14 +18284,14 @@ exports[`Storyshots Forms/RadioButton/RadioButtonGroup Base 1`] = `
   <div>
     <input
       class="circuit-0 circuit-1"
-      id="radio-button_33"
+      id="radio-button_38"
       name="radio-button-group"
       type="radio"
       value="apple"
     />
     <label
       class="circuit-2 circuit-3"
-      for="radio-button_33"
+      for="radio-button_38"
     >
       Apple
     </label>
@@ -18063,14 +18299,14 @@ exports[`Storyshots Forms/RadioButton/RadioButtonGroup Base 1`] = `
   <div>
     <input
       class="circuit-0 circuit-1"
-      id="radio-button_34"
+      id="radio-button_39"
       name="radio-button-group"
       type="radio"
       value="banana"
     />
     <label
       class="circuit-2 circuit-3"
-      for="radio-button_34"
+      for="radio-button_39"
     >
       Banana
     </label>
@@ -18078,14 +18314,14 @@ exports[`Storyshots Forms/RadioButton/RadioButtonGroup Base 1`] = `
   <div>
     <input
       class="circuit-0 circuit-1"
-      id="radio-button_35"
+      id="radio-button_40"
       name="radio-button-group"
       type="radio"
       value="mango"
     />
     <label
       class="circuit-2 circuit-3"
-      for="radio-button_35"
+      for="radio-button_40"
     >
       Mango
     </label>
@@ -18166,7 +18402,7 @@ label + .circuit-6 {
 
 <label
   class="circuit-8 circuit-9"
-  for="39"
+  for="44"
 >
   <span
     class="circuit-0 circuit-1"
@@ -18178,7 +18414,7 @@ label + .circuit-6 {
   >
     <select
       class="circuit-2 circuit-3"
-      id="39"
+      id="44"
       name="select"
     >
       <option
@@ -18349,7 +18585,7 @@ label + .circuit-10 {
 
 <label
   class="circuit-12 circuit-13"
-  for="40"
+  for="45"
 >
   <span
     class="circuit-0 circuit-1"
@@ -18361,7 +18597,7 @@ label + .circuit-10 {
   >
     <select
       class="circuit-2 circuit-3"
-      id="40"
+      id="45"
       name="select"
     >
       <option
@@ -18507,7 +18743,7 @@ label + .circuit-7 {
 
 <label
   class="circuit-9 circuit-10"
-  for="41"
+  for="46"
 >
   <span
     class="circuit-0 circuit-1"
@@ -18566,7 +18802,7 @@ label + .circuit-7 {
     </svg>
     <select
       class="circuit-3 circuit-4"
-      id="41"
+      id="46"
       name="country_select"
     >
       <option
@@ -18692,7 +18928,7 @@ label + .circuit-6 {
 
 <label
   class="circuit-8 circuit-9"
-  for="42"
+  for="47"
 >
   <span
     class="circuit-0 circuit-1"
@@ -18704,7 +18940,7 @@ label + .circuit-6 {
   >
     <select
       class="circuit-2 circuit-3"
-      id="42"
+      id="47"
       name="select"
     >
       <option
@@ -18818,13 +19054,13 @@ exports[`Storyshots Forms/Selector Base 1`] = `
 >
   <input
     class="circuit-0 circuit-1"
-    id="selector_43"
+    id="selector_48"
     type="radio"
     value=""
   />
   <label
     class="circuit-2 circuit-3"
-    for="selector_43"
+    for="selector_48"
   >
     Select me!
   </label>
@@ -18913,14 +19149,14 @@ exports[`Storyshots Forms/Selector Disabled 1`] = `
   <input
     class="circuit-0 circuit-1"
     disabled=""
-    id="selector_45"
+    id="selector_50"
     type="radio"
     value=""
   />
   <label
     class="circuit-2 circuit-3"
     disabled=""
-    for="selector_45"
+    for="selector_50"
   >
     I cannot be selected
   </label>
@@ -19002,13 +19238,13 @@ exports[`Storyshots Forms/Selector Selected 1`] = `
   <input
     checked=""
     class="circuit-0 circuit-1"
-    id="selector_44"
+    id="selector_49"
     type="radio"
     value=""
   />
   <label
     class="circuit-2 circuit-3"
-    for="selector_44"
+    for="selector_49"
   >
     I am selected!
   </label>
@@ -19093,14 +19329,14 @@ exports[`Storyshots Forms/Selector/SelectorGroup Base 1`] = `
   >
     <input
       class="circuit-0 circuit-1"
-      id="selector_46"
+      id="selector_51"
       name="selector-group"
       type="radio"
       value="apple"
     />
     <label
       class="circuit-2 circuit-3"
-      for="selector_46"
+      for="selector_51"
     >
       Apple
     </label>
@@ -19110,14 +19346,14 @@ exports[`Storyshots Forms/Selector/SelectorGroup Base 1`] = `
   >
     <input
       class="circuit-0 circuit-1"
-      id="selector_47"
+      id="selector_52"
       name="selector-group"
       type="radio"
       value="banana"
     />
     <label
       class="circuit-2 circuit-3"
-      for="selector_47"
+      for="selector_52"
     >
       Banana
     </label>
@@ -19127,14 +19363,14 @@ exports[`Storyshots Forms/Selector/SelectorGroup Base 1`] = `
   >
     <input
       class="circuit-0 circuit-1"
-      id="selector_48"
+      id="selector_53"
       name="selector-group"
       type="radio"
       value="mango"
     />
     <label
       class="circuit-2 circuit-3"
-      for="selector_48"
+      for="selector_53"
     >
       Mango
     </label>
@@ -19220,14 +19456,14 @@ exports[`Storyshots Forms/Selector/SelectorGroup Multiple 1`] = `
   >
     <input
       class="circuit-0 circuit-1"
-      id="selector_49"
+      id="selector_54"
       name="selector-group"
       type="checkbox"
       value="apple"
     />
     <label
       class="circuit-2 circuit-3"
-      for="selector_49"
+      for="selector_54"
     >
       Apple
     </label>
@@ -19237,14 +19473,14 @@ exports[`Storyshots Forms/Selector/SelectorGroup Multiple 1`] = `
   >
     <input
       class="circuit-0 circuit-1"
-      id="selector_50"
+      id="selector_55"
       name="selector-group"
       type="checkbox"
       value="banana"
     />
     <label
       class="circuit-2 circuit-3"
-      for="selector_50"
+      for="selector_55"
     >
       Banana
     </label>
@@ -19254,14 +19490,14 @@ exports[`Storyshots Forms/Selector/SelectorGroup Multiple 1`] = `
   >
     <input
       class="circuit-0 circuit-1"
-      id="selector_51"
+      id="selector_56"
       name="selector-group"
       type="checkbox"
       value="mango"
     />
     <label
       class="circuit-2 circuit-3"
-      for="selector_51"
+      for="selector_56"
     >
       Mango
     </label>
@@ -19353,7 +19589,7 @@ label + .circuit-6 {
 
 <label
   class="circuit-8 circuit-9"
-  for="53"
+  for="58"
 >
   <span
     class="circuit-0 circuit-1"
@@ -19366,7 +19602,7 @@ label + .circuit-6 {
     <textarea
       aria-invalid="false"
       class="circuit-2 circuit-3"
-      id="53"
+      id="58"
       placeholder="Write your text here..."
     />
     <div
@@ -19449,7 +19685,7 @@ label + .circuit-4 {
 
 <label
   class="circuit-6 circuit-7"
-  for="57"
+  for="62"
 >
   <span
     class="circuit-0 circuit-1"
@@ -19464,7 +19700,7 @@ label + .circuit-4 {
       aria-invalid="false"
       class="circuit-2 circuit-3"
       disabled=""
-      id="57"
+      id="62"
       placeholder="Write your text here..."
     >
       You cannot edit the text because the textarea is disabled
@@ -19626,7 +19862,7 @@ label + .circuit-9 {
 
 <label
   class="circuit-11 circuit-12"
-  for="54"
+  for="59"
 >
   <span
     class="circuit-0 circuit-1"
@@ -19639,7 +19875,7 @@ label + .circuit-9 {
     <textarea
       aria-invalid="true"
       class="circuit-2 circuit-3"
-      id="54"
+      id="59"
       placeholder="Write your text here..."
     />
     <div
@@ -19759,7 +19995,7 @@ label + .circuit-6 {
 
 <label
   class="circuit-8 circuit-9"
-  for="56"
+  for="61"
 >
   <span
     class="circuit-0 circuit-1"
@@ -19772,7 +20008,7 @@ label + .circuit-6 {
     <textarea
       aria-invalid="false"
       class="circuit-2 circuit-3"
-      id="56"
+      id="61"
       placeholder="Write your text here..."
     />
     <div
@@ -19935,7 +20171,7 @@ label + .circuit-9 {
 
 <label
   class="circuit-11 circuit-12"
-  for="55"
+  for="60"
 >
   <span
     class="circuit-0 circuit-1"
@@ -19948,7 +20184,7 @@ label + .circuit-9 {
     <textarea
       aria-invalid="false"
       class="circuit-2 circuit-3"
-      id="55"
+      id="60"
       placeholder="Write your text here..."
     />
     <div
@@ -20078,7 +20314,7 @@ label + .circuit-6 {
 
 <label
   class="circuit-8 circuit-9"
-  for="58"
+  for="63"
 >
   <span
     class="circuit-0 circuit-1"
@@ -20091,7 +20327,7 @@ label + .circuit-6 {
     <textarea
       aria-invalid="false"
       class="circuit-2 circuit-3"
-      id="58"
+      id="63"
       placeholder="Write your text here..."
     />
     <div
@@ -20201,9 +20437,9 @@ exports[`Storyshots Forms/Toggle Base 1`] = `
 >
   <button
     aria-checked="false"
-    aria-labelledby="toggle-label_60"
+    aria-labelledby="toggle-label_65"
     class="circuit-4 circuit-5"
-    id="toggle-switch_59"
+    id="toggle-switch_64"
     role="switch"
     type="button"
   >
@@ -20218,8 +20454,8 @@ exports[`Storyshots Forms/Toggle Base 1`] = `
   </button>
   <label
     class="circuit-8 circuit-9"
-    for="toggle-switch_59"
-    id="toggle-label_60"
+    for="toggle-switch_64"
+    id="toggle-label_65"
   >
     <p
       class="circuit-6 circuit-7"
@@ -20348,9 +20584,9 @@ exports[`Storyshots Forms/Toggle Reversed 1`] = `
 >
   <button
     aria-checked="false"
-    aria-labelledby="toggle-label_64"
+    aria-labelledby="toggle-label_69"
     class="circuit-4 circuit-5"
-    id="toggle-switch_63"
+    id="toggle-switch_68"
     role="switch"
     type="button"
   >
@@ -20365,8 +20601,8 @@ exports[`Storyshots Forms/Toggle Reversed 1`] = `
   </button>
   <label
     class="circuit-8 circuit-9"
-    for="toggle-switch_63"
-    id="toggle-label_64"
+    for="toggle-switch_68"
+    id="toggle-label_69"
   >
     <p
       class="circuit-6 circuit-7"
@@ -20493,9 +20729,9 @@ exports[`Storyshots Forms/Toggle With Explanation 1`] = `
 >
   <button
     aria-checked="false"
-    aria-labelledby="toggle-label_62"
+    aria-labelledby="toggle-label_67"
     class="circuit-4 circuit-5"
-    id="toggle-switch_61"
+    id="toggle-switch_66"
     role="switch"
     type="button"
   >
@@ -20510,8 +20746,8 @@ exports[`Storyshots Forms/Toggle With Explanation 1`] = `
   </button>
   <label
     class="circuit-10 circuit-11"
-    for="toggle-switch_61"
-    id="toggle-label_62"
+    for="toggle-switch_66"
+    id="toggle-label_67"
   >
     <p
       class="circuit-6 circuit-7"
diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js
index 8d17f9624e..1808bdb45b 100644
--- a/src/components/Carousel/Carousel.js
+++ b/src/components/Carousel/Carousel.js
@@ -18,6 +18,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
+import ProgressBar from '../ProgressBar';
 import Step from '../Step';
 import {
   childrenPropType,
@@ -30,7 +31,6 @@ import Slide from './components/Slide';
 import SlideImage from './components/SlideImage';
 import Controls from './components/Controls';
 import Status from './components/Status';
-import Progress from './components/Progress';
 import {
   ButtonList,
   NextButton,
@@ -56,10 +56,9 @@ const statusAlignment = ({ theme }) => css`
 `;
 const StyledStatus = styled(Status)(statusAlignment);
 
-const progressAlignment = css`
+const StyledProgressBar = styled(ProgressBar)`
   flex: 1 1 auto;
 `;
-const StyledProgress = styled(Progress)(progressAlignment);
 
 const buttonsAlignment = ({ theme }) => css`
   margin-left: ${theme.spacings.exa};
@@ -138,10 +137,13 @@ const Carousel = ({
             <Controls>
               <StyledStatus step={state.step} total={slidesTotal} />
 
-              <StyledProgress
+              <StyledProgressBar
                 key={state.step}
+                size="byte"
+                variant="secondary"
+                loop
                 paused={state.paused}
-                animationDuration={Math.round(
+                duration={Math.round(
                   state.stepDuration + state.animationDuration
                 )}
               />
diff --git a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
index 4622e5c012..cc05d0a8b1 100644
--- a/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
+++ b/src/components/Carousel/__snapshots__/Carousel.spec.js.snap
@@ -20,9 +20,9 @@ exports[`Carousel styles should render with children as a function 1`] = `
 
   100% {
     width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
   }
 }
 
@@ -43,13 +43,13 @@ exports[`Carousel styles should render with children as a function 1`] = `
 
   100% {
     width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
   }
 }
 
-.circuit-59 {
+.circuit-61 {
   width: 100%;
   height: auto;
   position: relative;
@@ -180,7 +180,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
   z-index: -2;
 }
 
-.circuit-57 {
+.circuit-59 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -230,21 +230,48 @@ exports[`Carousel styles should render with children as a function 1`] = `
   }
 }
 
-.circuit-41 {
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
+.circuit-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
 
-.circuit-41:after {
+.circuit-41 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 4px;
+}
+
+.circuit-41::after {
   content: '';
   display: block;
-  background-color: #0F131A;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-41::after {
+  background-color: #212933;
+}
+
+.circuit-41::after {
   -webkit-animation-name: animation-0;
   animation-name: animation-0;
   -webkit-animation-duration: 5640ms;
@@ -253,12 +280,17 @@ exports[`Carousel styles should render with children as a function 1`] = `
   animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  height: 100%;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.circuit-42 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
 }
 
-.circuit-55 {
+.circuit-57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -275,12 +307,12 @@ exports[`Carousel styles should render with children as a function 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-55 {
+  .circuit-57 {
     margin-left: 12px;
   }
 }
 
-.circuit-46 {
+.circuit-48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -320,54 +352,54 @@ exports[`Carousel styles should render with children as a function 1`] = `
   margin-left: 8px;
 }
 
-.circuit-46:focus {
+.circuit-48:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-46:focus::-moz-focus-inner {
+.circuit-48:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-46:disabled,
-.circuit-46[disabled] {
+.circuit-48:disabled,
+.circuit-48[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-46:hover {
+.circuit-48:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-46:active {
+.circuit-48:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-46:first-of-type {
+.circuit-48:first-of-type {
   margin-left: 0;
 }
 
-.circuit-46:active,
-.circuit-46:focus,
-.circuit-46:hover {
+.circuit-48:active,
+.circuit-48:focus,
+.circuit-48:hover {
   padding: 0;
 }
 
 @media (max-width:479px) {
-  .circuit-46 {
+  .circuit-48 {
     width: 24px;
     height: 24px;
   }
 
-  .circuit-46 svg {
+  .circuit-48 svg {
     width: 25%;
   }
 }
 
-.circuit-43 {
+.circuit-45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -384,7 +416,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
 
 <div
   aria-label="gallery"
-  class="circuit-59 circuit-60"
+  class="circuit-61 circuit-62"
 >
   <div
     class="circuit-36 circuit-37"
@@ -460,7 +492,7 @@ exports[`Carousel styles should render with children as a function 1`] = `
     </div>
   </div>
   <div
-    class="circuit-57 circuit-58"
+    class="circuit-59 circuit-60"
   >
     <p
       class="circuit-38 circuit-39 circuit-40"
@@ -470,17 +502,27 @@ exports[`Carousel styles should render with children as a function 1`] = `
       3
     </p>
     <div
-      class="circuit-41 circuit-42"
-    />
+      class="circuit-43 circuit-44"
+    >
+      <span
+        aria-labelledby="progress-bar_6"
+        class="circuit-41"
+        loop=""
+      />
+      <span
+        class="circuit-42"
+        id="progress-bar_6"
+      />
+    </div>
     <div
-      class="circuit-55 circuit-56"
+      class="circuit-57 circuit-58"
     >
       <button
         aria-label="pause"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -500,10 +542,10 @@ exports[`Carousel styles should render with children as a function 1`] = `
       </button>
       <button
         aria-label="previous"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -524,10 +566,10 @@ exports[`Carousel styles should render with children as a function 1`] = `
       </button>
       <button
         aria-label="next"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -573,9 +615,9 @@ exports[`Carousel styles should render with children as a node 1`] = `
 
   100% {
     width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
   }
 }
 
@@ -596,13 +638,13 @@ exports[`Carousel styles should render with children as a node 1`] = `
 
   100% {
     width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
   }
 }
 
-.circuit-59 {
+.circuit-61 {
   width: 100%;
   height: auto;
   position: relative;
@@ -733,7 +775,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
   z-index: -2;
 }
 
-.circuit-57 {
+.circuit-59 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -783,21 +825,48 @@ exports[`Carousel styles should render with children as a node 1`] = `
   }
 }
 
-.circuit-41 {
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
+.circuit-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
 
-.circuit-41:after {
+.circuit-41 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 4px;
+}
+
+.circuit-41::after {
   content: '';
   display: block;
-  background-color: #0F131A;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-41::after {
+  background-color: #212933;
+}
+
+.circuit-41::after {
   -webkit-animation-name: animation-0;
   animation-name: animation-0;
   -webkit-animation-duration: 5640ms;
@@ -806,12 +875,17 @@ exports[`Carousel styles should render with children as a node 1`] = `
   animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  height: 100%;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.circuit-42 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
 }
 
-.circuit-55 {
+.circuit-57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -828,12 +902,12 @@ exports[`Carousel styles should render with children as a node 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-55 {
+  .circuit-57 {
     margin-left: 12px;
   }
 }
 
-.circuit-46 {
+.circuit-48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -873,54 +947,54 @@ exports[`Carousel styles should render with children as a node 1`] = `
   margin-left: 8px;
 }
 
-.circuit-46:focus {
+.circuit-48:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-46:focus::-moz-focus-inner {
+.circuit-48:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-46:disabled,
-.circuit-46[disabled] {
+.circuit-48:disabled,
+.circuit-48[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-46:hover {
+.circuit-48:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-46:active {
+.circuit-48:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-46:first-of-type {
+.circuit-48:first-of-type {
   margin-left: 0;
 }
 
-.circuit-46:active,
-.circuit-46:focus,
-.circuit-46:hover {
+.circuit-48:active,
+.circuit-48:focus,
+.circuit-48:hover {
   padding: 0;
 }
 
 @media (max-width:479px) {
-  .circuit-46 {
+  .circuit-48 {
     width: 24px;
     height: 24px;
   }
 
-  .circuit-46 svg {
+  .circuit-48 svg {
     width: 25%;
   }
 }
 
-.circuit-43 {
+.circuit-45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -937,7 +1011,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
 
 <div
   aria-label="gallery"
-  class="circuit-59 circuit-60"
+  class="circuit-61 circuit-62"
 >
   <div
     class="circuit-36 circuit-37"
@@ -1013,7 +1087,7 @@ exports[`Carousel styles should render with children as a node 1`] = `
     </div>
   </div>
   <div
-    class="circuit-57 circuit-58"
+    class="circuit-59 circuit-60"
   >
     <p
       class="circuit-38 circuit-39 circuit-40"
@@ -1023,17 +1097,27 @@ exports[`Carousel styles should render with children as a node 1`] = `
       3
     </p>
     <div
-      class="circuit-41 circuit-42"
-    />
+      class="circuit-43 circuit-44"
+    >
+      <span
+        aria-labelledby="progress-bar_8"
+        class="circuit-41"
+        loop=""
+      />
+      <span
+        class="circuit-42"
+        id="progress-bar_8"
+      />
+    </div>
     <div
-      class="circuit-55 circuit-56"
+      class="circuit-57 circuit-58"
     >
       <button
         aria-label="pause"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -1053,10 +1137,10 @@ exports[`Carousel styles should render with children as a node 1`] = `
       </button>
       <button
         aria-label="previous"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -1077,10 +1161,10 @@ exports[`Carousel styles should render with children as a node 1`] = `
       </button>
       <button
         aria-label="next"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -1125,9 +1209,9 @@ exports[`Carousel styles should render with default paused styles 1`] = `
 
   100% {
     width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
   }
 }
 
@@ -1148,13 +1232,13 @@ exports[`Carousel styles should render with default paused styles 1`] = `
 
   100% {
     width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
   }
 }
 
-.circuit-59 {
+.circuit-61 {
   width: 100%;
   height: auto;
   position: relative;
@@ -1285,7 +1369,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   z-index: -2;
 }
 
-.circuit-57 {
+.circuit-59 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1335,7 +1419,27 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   }
 }
 
-.circuit-55 {
+.circuit-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.circuit-42 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1352,12 +1456,12 @@ exports[`Carousel styles should render with default paused styles 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-55 {
+  .circuit-57 {
     margin-left: 12px;
   }
 }
 
-.circuit-46 {
+.circuit-48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1397,54 +1501,54 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   margin-left: 8px;
 }
 
-.circuit-46:focus {
+.circuit-48:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-46:focus::-moz-focus-inner {
+.circuit-48:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-46:disabled,
-.circuit-46[disabled] {
+.circuit-48:disabled,
+.circuit-48[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-46:hover {
+.circuit-48:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-46:active {
+.circuit-48:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-46:first-of-type {
+.circuit-48:first-of-type {
   margin-left: 0;
 }
 
-.circuit-46:active,
-.circuit-46:focus,
-.circuit-46:hover {
+.circuit-48:active,
+.circuit-48:focus,
+.circuit-48:hover {
   padding: 0;
 }
 
 @media (max-width:479px) {
-  .circuit-46 {
+  .circuit-48 {
     width: 24px;
     height: 24px;
   }
 
-  .circuit-46 svg {
+  .circuit-48 svg {
     width: 25%;
   }
 }
 
-.circuit-43 {
+.circuit-45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1460,20 +1564,33 @@ exports[`Carousel styles should render with default paused styles 1`] = `
 }
 
 .circuit-41 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
   width: 100%;
-  height: 2px;
   overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
-  -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
+  height: 4px;
 }
 
-.circuit-41:after {
+.circuit-41::after {
   content: '';
   display: block;
-  background-color: #0F131A;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-41::after {
+  background-color: #212933;
+}
+
+.circuit-41::after {
   -webkit-animation-name: animation-0;
   animation-name: animation-0;
   -webkit-animation-duration: 5640ms;
@@ -1482,14 +1599,13 @@ exports[`Carousel styles should render with default paused styles 1`] = `
   animation-play-state: paused;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  height: 100%;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
 }
 
 <div
   aria-label="gallery"
-  class="circuit-59 circuit-60"
+  class="circuit-61 circuit-62"
 >
   <div
     class="circuit-36 circuit-37"
@@ -1565,7 +1681,7 @@ exports[`Carousel styles should render with default paused styles 1`] = `
     </div>
   </div>
   <div
-    class="circuit-57 circuit-58"
+    class="circuit-59 circuit-60"
   >
     <p
       class="circuit-38 circuit-39 circuit-40"
@@ -1575,17 +1691,27 @@ exports[`Carousel styles should render with default paused styles 1`] = `
       3
     </p>
     <div
-      class="circuit-41 circuit-42"
-    />
+      class="circuit-43 circuit-44"
+    >
+      <span
+        aria-labelledby="progress-bar_4"
+        class="circuit-41"
+        loop=""
+      />
+      <span
+        class="circuit-42"
+        id="progress-bar_4"
+      />
+    </div>
     <div
-      class="circuit-55 circuit-56"
+      class="circuit-57 circuit-58"
     >
       <button
         aria-label="play"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -1606,10 +1732,10 @@ exports[`Carousel styles should render with default paused styles 1`] = `
       </button>
       <button
         aria-label="previous"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -1630,10 +1756,10 @@ exports[`Carousel styles should render with default paused styles 1`] = `
       </button>
       <button
         aria-label="next"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -1675,13 +1801,13 @@ exports[`Carousel styles should render with default styles 1`] = `
 
   100% {
     width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
   }
 }
 
-.circuit-59 {
+.circuit-61 {
   width: 100%;
   height: auto;
   position: relative;
@@ -1812,7 +1938,7 @@ exports[`Carousel styles should render with default styles 1`] = `
   z-index: -2;
 }
 
-.circuit-57 {
+.circuit-59 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1862,21 +1988,48 @@ exports[`Carousel styles should render with default styles 1`] = `
   }
 }
 
-.circuit-41 {
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
+.circuit-44 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
 
-.circuit-41:after {
+.circuit-41 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 4px;
+}
+
+.circuit-41::after {
   content: '';
   display: block;
-  background-color: #0F131A;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-41::after {
+  background-color: #212933;
+}
+
+.circuit-41::after {
   -webkit-animation-name: animation-0;
   animation-name: animation-0;
   -webkit-animation-duration: 5640ms;
@@ -1885,12 +2038,17 @@ exports[`Carousel styles should render with default styles 1`] = `
   animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  height: 100%;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.circuit-42 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
 }
 
-.circuit-55 {
+.circuit-57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1907,12 +2065,12 @@ exports[`Carousel styles should render with default styles 1`] = `
 }
 
 @media (max-width:479px) {
-  .circuit-55 {
+  .circuit-57 {
     margin-left: 12px;
   }
 }
 
-.circuit-46 {
+.circuit-48 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1952,54 +2110,54 @@ exports[`Carousel styles should render with default styles 1`] = `
   margin-left: 8px;
 }
 
-.circuit-46:focus {
+.circuit-48:focus {
   outline: 0;
   box-shadow: 0 0 0 4px #AFD0FE;
 }
 
-.circuit-46:focus::-moz-focus-inner {
+.circuit-48:focus::-moz-focus-inner {
   border: 0;
 }
 
-.circuit-46:disabled,
-.circuit-46[disabled] {
+.circuit-48:disabled,
+.circuit-48[disabled] {
   opacity: 0.5;
   pointer-events: none;
   box-shadow: none;
 }
 
-.circuit-46:hover {
+.circuit-48:hover {
   background-color: #1760CE;
   border-color: #1760CE;
 }
 
-.circuit-46:active {
+.circuit-48:active {
   background-color: #003C8B;
   border-color: #003C8B;
 }
 
-.circuit-46:first-of-type {
+.circuit-48:first-of-type {
   margin-left: 0;
 }
 
-.circuit-46:active,
-.circuit-46:focus,
-.circuit-46:hover {
+.circuit-48:active,
+.circuit-48:focus,
+.circuit-48:hover {
   padding: 0;
 }
 
 @media (max-width:479px) {
-  .circuit-46 {
+  .circuit-48 {
     width: 24px;
     height: 24px;
   }
 
-  .circuit-46 svg {
+  .circuit-48 svg {
     width: 25%;
   }
 }
 
-.circuit-43 {
+.circuit-45 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2016,7 +2174,7 @@ exports[`Carousel styles should render with default styles 1`] = `
 
 <div
   aria-label="gallery"
-  class="circuit-59 circuit-60"
+  class="circuit-61 circuit-62"
 >
   <div
     class="circuit-36 circuit-37"
@@ -2092,7 +2250,7 @@ exports[`Carousel styles should render with default styles 1`] = `
     </div>
   </div>
   <div
-    class="circuit-57 circuit-58"
+    class="circuit-59 circuit-60"
   >
     <p
       class="circuit-38 circuit-39 circuit-40"
@@ -2102,17 +2260,27 @@ exports[`Carousel styles should render with default styles 1`] = `
       3
     </p>
     <div
-      class="circuit-41 circuit-42"
-    />
+      class="circuit-43 circuit-44"
+    >
+      <span
+        aria-labelledby="progress-bar_2"
+        class="circuit-41"
+        loop=""
+      />
+      <span
+        class="circuit-42"
+        id="progress-bar_2"
+      />
+    </div>
     <div
-      class="circuit-55 circuit-56"
+      class="circuit-57 circuit-58"
     >
       <button
         aria-label="pause"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -2132,10 +2300,10 @@ exports[`Carousel styles should render with default styles 1`] = `
       </button>
       <button
         aria-label="previous"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
@@ -2156,10 +2324,10 @@ exports[`Carousel styles should render with default styles 1`] = `
       </button>
       <button
         aria-label="next"
-        class="circuit-45 circuit-46"
+        class="circuit-47 circuit-48"
       >
         <div
-          class="circuit-43 circuit-44"
+          class="circuit-45 circuit-46"
         >
           <svg
             fill="none"
diff --git a/src/components/Carousel/components/Progress/Progress.js b/src/components/Carousel/components/Progress/Progress.js
deleted file mode 100644
index f83c5f133e..0000000000
--- a/src/components/Carousel/components/Progress/Progress.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/core';
-
-import { SLIDE_DURATION } from '../../constants';
-
-const progressAnimation = keyframes`
-  0% {
-    width: 0%;
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    transform: translateX(102%);
-  }
-`;
-const progressStyles = ({ theme, paused, animationDuration, cycle }) => css`
-  label: carousel__progress;
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: ${theme.colors.n200};
-  border-radius: ${theme.borderRadius.giga};
-
-  &:after {
-    content: '';
-    display: block;
-    background-color: ${theme.colors.black};
-    animation-name: ${progressAnimation};
-    animation-duration: ${animationDuration}ms;
-    animation-play-state: ${paused ? 'paused' : 'running'};
-    animation-fill-mode: forwards;
-    animation-iteration-count: ${cycle ? 'infinite' : 1};
-    height: 100%;
-  }
-`;
-const Progress = styled('div')(progressStyles);
-
-Progress.propTypes = {
-  paused: PropTypes.bool,
-  animationDuration: PropTypes.number,
-  slideDuration: PropTypes.number
-};
-
-Progress.defaultProps = {
-  /**
-   * Indicates if progress animation is currently paused.
-   */
-  paused: false,
-  /**
-   * Indicates if progress animation is restarted after finishing.
-   */
-  cycle: false,
-  /**
-   * Indicatest duration of progress animation (in milliseconds).
-   */
-  animationDuration: SLIDE_DURATION
-};
-
-export default Progress;
diff --git a/src/components/Carousel/components/Progress/Progress.story.js b/src/components/Carousel/components/Progress/Progress.story.js
deleted file mode 100644
index 0cb2bf23e7..0000000000
--- a/src/components/Carousel/components/Progress/Progress.story.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { boolean, number } from '@storybook/addon-knobs/react';
-
-import Progress from './Progress';
-import { SLIDE_DURATION } from '../../constants';
-
-export default {
-  title: 'Components/Carousel/Progress',
-  component: Progress,
-  parameters: {
-    jest: ['Carousel/Progress']
-  }
-};
-
-export const base = () => (
-  <div style={{ width: '60vw' }}>
-    <Progress
-      paused={boolean('Paused', false)}
-      cycle={boolean('Cycle', true)}
-      animationDuration={number('Animation duration', SLIDE_DURATION)}
-    />
-  </div>
-);
diff --git a/src/components/Carousel/components/Progress/__snapshots__/Progress.spec.js.snap b/src/components/Carousel/components/Progress/__snapshots__/Progress.spec.js.snap
deleted file mode 100644
index 259ec9697e..0000000000
--- a/src/components/Carousel/components/Progress/__snapshots__/Progress.spec.js.snap
+++ /dev/null
@@ -1,232 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Progress styles should render with cycle styles 1`] = `
-@keyframes animation-0 {
-  0% {
-    width: 0%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    width: 0%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    width: 0%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
-  }
-}
-
-.circuit-0 {
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
-}
-
-.circuit-0:after {
-  content: '';
-  display: block;
-  background-color: #0F131A;
-  -webkit-animation-name: animation-0;
-  animation-name: animation-0;
-  -webkit-animation-duration: 5000ms;
-  animation-duration: 5000ms;
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  animation-iteration-count: infinite;
-  height: 100%;
-}
-
-<div
-  class="circuit-0 circuit-1"
-/>
-`;
-
-exports[`Progress styles should render with default styles 1`] = `
-@keyframes animation-0 {
-  0% {
-    width: 0%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
-  }
-}
-
-.circuit-0 {
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
-}
-
-.circuit-0:after {
-  content: '';
-  display: block;
-  background-color: #0F131A;
-  -webkit-animation-name: animation-0;
-  animation-name: animation-0;
-  -webkit-animation-duration: 5000ms;
-  animation-duration: 5000ms;
-  -webkit-animation-play-state: running;
-  animation-play-state: running;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  height: 100%;
-}
-
-<div
-  class="circuit-0 circuit-1"
-/>
-`;
-
-exports[`Progress styles should render with paused styles 1`] = `
-@keyframes animation-0 {
-  0% {
-    width: 0%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
-  }
-}
-
-@keyframes animation-0 {
-  0% {
-    width: 0%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  90% {
-    width: 100%;
-    -webkit-transform: translateX(0%);
-    -ms-transform: translateX(0%);
-    transform: translateX(0%);
-  }
-
-  100% {
-    width: 100%;
-    -webkit-transform: translateX(102%);
-    -ms-transform: translateX(102%);
-    transform: translateX(102%);
-  }
-}
-
-.circuit-0 {
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-  background-color: #EEF0F2;
-  border-radius: 5px;
-}
-
-.circuit-0:after {
-  content: '';
-  display: block;
-  background-color: #0F131A;
-  -webkit-animation-name: animation-0;
-  animation-name: animation-0;
-  -webkit-animation-duration: 5000ms;
-  animation-duration: 5000ms;
-  -webkit-animation-play-state: paused;
-  animation-play-state: paused;
-  -webkit-animation-fill-mode: forwards;
-  animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: 1;
-  animation-iteration-count: 1;
-  height: 100%;
-}
-
-<div
-  class="circuit-0 circuit-1"
-/>
-`;
diff --git a/src/components/Carousel/components/Progress/index.js b/src/components/Carousel/components/Progress/index.js
deleted file mode 100644
index 2de6b2bdd1..0000000000
--- a/src/components/Carousel/components/Progress/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import Progress from './Progress';
-
-export default Progress;
diff --git a/src/components/Carousel/index.js b/src/components/Carousel/index.js
index d509996e88..72877beaa5 100644
--- a/src/components/Carousel/index.js
+++ b/src/components/Carousel/index.js
@@ -15,7 +15,6 @@
 
 import Container from './components/Container';
 import Controls from './components/Controls';
-import Progress from './components/Progress';
 import Slide from './components/Slide';
 import Slides from './components/Slides';
 import SlideImage from './components/SlideImage';
@@ -32,7 +31,6 @@ import Carousel from './Carousel';
 export const CarouselComposer = {
   Container,
   Controls,
-  Progress,
   Slide,
   Slides,
   SlideImage,
diff --git a/src/components/ProgressBar/ProgressBar.docs.mdx b/src/components/ProgressBar/ProgressBar.docs.mdx
index 180ef7dad2..d2b78feb7e 100644
--- a/src/components/ProgressBar/ProgressBar.docs.mdx
+++ b/src/components/ProgressBar/ProgressBar.docs.mdx
@@ -1,22 +1,18 @@
 import { Status, Props, Story } from '../../../.storybook/components';
-import ProgressBar from './ProgressBar';
+import { ProgressBar } from './ProgressBar';
 
-# Progress bar
+# ProgressBar
 
 <Status.Stable />
 
-A progress bar is a UI element used to visualise the progression of a task or
-operation. The visual element is always combined with a label describing a
-status value either in percentage or fraction format.
-
-<Story id="components-progressbar--base" />
+A progress bar is a UI element used to visualise the progression of a task or operation. The visual element is always combined with a label describing a status value either in percentage or fraction format.
 
+<Story id="components-progressbar--steps" />
 <Props of={ProgressBar} />
 
 ## When to use it
 
-The progress bar should be used to indicate the amount of time left to complete
-a task. It should not however, be used to indicate the time needed to load a page.
+The progress bar should be used to indicate the amount of steps or time left to complete a task. It should not however, be used to indicate the time needed to load a page.
 
 ## Usage guidelines
 
@@ -27,17 +23,27 @@ a task. It should not however, be used to indicate the time needed to load a pag
 
 ## Component variations
 
-### Percentage or fraction completion
+### Step or time-based
+
+A progress bar can be used to display the progression of steps in a task or a fixed amount of time. The component adapts automatically based on the props it is passed: when you pass the `max` or `value` props, it renders statically. When you pass the `duration`, `pause`, or `loop` props, it smoothly animates the progress bar from empty to complete.
+
+<Story id="components-progressbar--steps" />
+<Story id="components-progressbar--timer" />
+
+### Percentage or fraction label
+
+When you specify the label for the progress bar, it should only be shown as either a fraction (e.g. _1/3_) or percentage (e.g. _33%_).
+
+<Story id="components-progressbar--labelled" />
 
-When you specify the label for the progress bar, it should only be shown
-as either a fraction (e.g. _1/3_) or percentage (e.g. _33%_).
+### Variants
 
-<Story id="components-progressbar--with-fraction" />
+You can use the progress bar in two variants: `primary` or `secondary`.
 
-<Story id="components-progressbar--with-percentage" />
+<Story id="components-progressbar--variants" />
 
 ### Sizes
 
-You can use the progress bar in a variety of sizes: `ProgressBar.KILO`, `ProgressBar.MEGA`, or `ProgressBar.GIGA`.
+You can use the progress bar in one of three sizes: `byte`, `kilo`, or `mega`.
 
-<Story id="components-progressbar--size" />
+<Story id="components-progressbar--sizes" />
diff --git a/src/components/ProgressBar/ProgressBar.js b/src/components/ProgressBar/ProgressBar.js
deleted file mode 100644
index e214d4d1c5..0000000000
--- a/src/components/ProgressBar/ProgressBar.js
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { css } from '@emotion/core';
-
-import { childrenPropType } from '../../util/shared-prop-types';
-import { textKilo } from '../../styles/style-helpers';
-import { uniqueId } from '../../util/id';
-import { sizes } from '../../styles/constants';
-
-const { KILO, MEGA, GIGA } = sizes;
-
-const calculateSize = ({ theme, size }) => {
-  const sizeMap = {
-    [KILO]: theme.spacings.byte,
-    [MEGA]: theme.spacings.mega,
-    [GIGA]: theme.spacings.tera
-  };
-  return sizeMap[size];
-};
-
-const wrapperStyles = ({ theme }) => css`
-  label: progress-bar;
-  display: flex;
-  align-items: center;
-  margin-bottom: ${theme.spacings.mega};
-`;
-
-const progressStyles = ({ theme, size, value, max }) => {
-  const outerBorderWidth = '1px';
-  const outerBorderRadius = theme.borderRadius.mega;
-  const innerBorderRadiusLeft = `calc(${outerBorderRadius} - ${outerBorderWidth})`;
-  const innerBorderRadiusRight =
-    value && max && (value / max) * 100 === 100 ? innerBorderRadiusLeft : 0;
-  const width = value && max ? (value / max) * 100 : 0;
-  return css`
-    label: progress-bar__progress;
-    background-color: ${theme.colors.n100};
-    border: ${outerBorderWidth} solid ${theme.colors.n300};
-    border-radius: ${outerBorderRadius};
-    position: relative;
-    width: 100%;
-    height: ${calculateSize({ theme, size })};
-    overflow: hidden;
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: ${width}%;
-      background-color: ${theme.colors.p500};
-      border: 1px solid ${theme.colors.p700};
-      box-shadow: inset 0 1px 0 0 ${theme.colors.p300};
-      border-radius: ${innerBorderRadiusLeft} ${innerBorderRadiusRight}
-        ${innerBorderRadiusRight} ${innerBorderRadiusLeft};
-      transition: width 0.05s ease-out;
-    }
-  `;
-};
-
-const labelStyles = ({ theme }) => css`
-  label: progress-bar__label;
-  ${textKilo({ theme })};
-  margin-left: ${theme.spacings.byte};
-`;
-
-const ProgressBarWrapper = styled('div')`
-  ${wrapperStyles};
-`;
-const ProgressBarProgress = styled('span')`
-  ${progressStyles};
-`;
-const ProgressBarLabel = styled('span')`
-  ${labelStyles};
-`;
-
-/**
- * Progress bar component to indicate progress
- */
-const ProgressBar = ({ children, max, value, size, ...props }) => {
-  const ariaId = uniqueId('progress-bar_');
-  return (
-    <ProgressBarWrapper {...props}>
-      <ProgressBarProgress
-        role="progressbar"
-        aria-valuenow={value}
-        aria-valuemin="0"
-        aria-valuemax={max}
-        aria-labelledby={ariaId}
-        size={size}
-        max={max}
-        value={value}
-      />
-      <ProgressBarLabel id={ariaId}>{children}</ProgressBarLabel>
-    </ProgressBarWrapper>
-  );
-};
-
-ProgressBar.KILO = KILO;
-ProgressBar.MEGA = MEGA;
-ProgressBar.GIGA = GIGA;
-
-ProgressBar.propTypes = {
-  /**
-   * A number greater than zero, indicating how much work the task requires.
-   */
-  max: PropTypes.number,
-  /**
-   * A number between 0 and max, indicating how much of the task has been
-   * completed.
-   */
-  value: PropTypes.number,
-  /**
-   * Size
-   */
-  size: PropTypes.oneOf([ProgressBar.KILO, ProgressBar.MEGA, ProgressBar.GIGA]),
-  /**
-   * Child nodes to be rendered as the label.
-   */
-  children: childrenPropType
-};
-
-ProgressBar.defaultProps = {
-  size: ProgressBar.KILO,
-  max: 1,
-  value: 0,
-  children: null
-};
-
-/**
- * @component
- */
-export default ProgressBar;
diff --git a/src/components/ProgressBar/ProgressBar.spec.js b/src/components/ProgressBar/ProgressBar.spec.js
deleted file mode 100644
index f147692e09..0000000000
--- a/src/components/ProgressBar/ProgressBar.spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-
-import ProgressBar from '.';
-
-describe('ProgressBar', () => {
-  /**
-   * Style tests.
-   */
-  it('should render with default styles', () => {
-    const actual = create(<ProgressBar />);
-    expect(actual).toMatchSnapshot();
-  });
-
-  it('should render with progress styles', () => {
-    const actual = create(<ProgressBar value={0.5} />);
-    expect(actual).toMatchSnapshot();
-  });
-
-  /**
-   * Accessibility tests.
-   */
-  it('should meet accessibility guidelines', async () => {
-    const wrapper = renderToHtml(<ProgressBar />);
-    const actual = await axe(wrapper);
-    expect(actual).toHaveNoViolations();
-  });
-});
diff --git a/src/components/Carousel/components/Progress/Progress.spec.js b/src/components/ProgressBar/ProgressBar.spec.tsx
similarity index 51%
rename from src/components/Carousel/components/Progress/Progress.spec.js
rename to src/components/ProgressBar/ProgressBar.spec.tsx
index ff161b10a2..17604c97a2 100644
--- a/src/components/Carousel/components/Progress/Progress.spec.js
+++ b/src/components/ProgressBar/ProgressBar.spec.tsx
@@ -15,34 +15,56 @@
 
 import React from 'react';
 
-import Progress from './Progress';
+import { create, renderToHtml, axe } from '../../util/test-utils';
 
-describe('Progress', () => {
-  describe('styles', () => {
-    it('should render with default styles', () => {
-      const actual = create(<Progress />);
+import ProgressBar from '.';
+
+describe('ProgressBar', () => {
+  describe('step-based', () => {
+    /**
+     * Style tests.
+     */
 
+    it('should render with default styles', () => {
+      const actual = create(<ProgressBar max={1} value={0.5} />);
       expect(actual).toMatchSnapshot();
     });
 
-    it('should render with paused styles', () => {
-      const actual = create(<Progress paused />);
+    /**
+     * Accessibility tests.
+     */
+    it('should meet accessibility guidelines', async () => {
+      const wrapper = renderToHtml(<ProgressBar max={1} value={0.5} />);
+      const actual = await axe(wrapper);
+      expect(actual).toHaveNoViolations();
+    });
+  });
 
+  describe('time-based', () => {
+    /**
+     * Style tests.
+     */
+    it('should render with default styles', () => {
+      const actual = create(<ProgressBar />);
       expect(actual).toMatchSnapshot();
     });
 
-    it('should render with cycle styles', () => {
-      const actual = create(<Progress cycle />);
+    it('should render with paused styles', () => {
+      const actual = create(<ProgressBar paused />);
+      expect(actual).toMatchSnapshot();
+    });
 
+    it('should render with loop styles', () => {
+      const actual = create(<ProgressBar loop />);
       expect(actual).toMatchSnapshot();
     });
-  });
 
-  describe('accessibility', () => {
+    /**
+     * Accessibility tests.
+     */
     it('should meet accessibility guidelines', async () => {
-      const wrapper = renderToHtml(<Progress />);
+      const wrapper = renderToHtml(<ProgressBar />);
       const actual = await axe(wrapper);
-
       expect(actual).toHaveNoViolations();
     });
   });
diff --git a/src/components/ProgressBar/ProgressBar.story.js b/src/components/ProgressBar/ProgressBar.story.js
deleted file mode 100644
index 18f31ffbfe..0000000000
--- a/src/components/ProgressBar/ProgressBar.story.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright 2019, SumUp Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React, { Fragment } from 'react';
-import { select, number } from '@storybook/addon-knobs/react';
-import { css } from '@emotion/core';
-
-import docs from './ProgressBar.docs.mdx';
-import ProgressBar from './ProgressBar';
-
-export default {
-  title: 'Components/ProgressBar',
-  component: ProgressBar,
-  parameters: {
-    docs: { page: docs },
-    jest: ['ProgressBar']
-  }
-};
-
-const progressBarStyles = css`
-  min-width: 500px;
-  max-width: 90%;
-`;
-
-export const base = () => {
-  const size = select(
-    'Size',
-    {
-      kilo: ProgressBar.KILO,
-      mega: ProgressBar.MEGA,
-      giga: ProgressBar.GIGA
-    },
-    ProgressBar.KILO
-  );
-  const max = number('Maximum value', 10);
-  const value = number('Value', 3);
-  return (
-    <ProgressBar value={value} max={max} size={size} css={progressBarStyles} />
-  );
-};
-
-export const withFraction = () => {
-  const max = 10;
-  const value = 7;
-  const children = `${value}/${max}`;
-  return (
-    <ProgressBar value={value} max={max} css={progressBarStyles}>
-      {children}
-    </ProgressBar>
-  );
-};
-
-export const withPercentage = () => {
-  const max = 10;
-  const value = 7;
-  const children = `${(value / max) * 100}%`;
-  return (
-    <ProgressBar value={value} max={max} css={progressBarStyles}>
-      {children}
-    </ProgressBar>
-  );
-};
-
-export const size = () => {
-  const max = 10;
-  const value = 7;
-  const children = `${(value / max) * 100}%`;
-  return (
-    <Fragment>
-      <ProgressBar
-        size={ProgressBar.KILO}
-        value={value}
-        max={max}
-        css={progressBarStyles}
-      >
-        {children}
-      </ProgressBar>
-      <ProgressBar
-        size={ProgressBar.MEGA}
-        value={value}
-        max={max}
-        css={progressBarStyles}
-      >
-        {children}
-      </ProgressBar>
-      <ProgressBar
-        size={ProgressBar.GIGA}
-        value={value}
-        max={max}
-        css={progressBarStyles}
-      >
-        {children}
-      </ProgressBar>
-    </Fragment>
-  );
-};
diff --git a/src/components/ProgressBar/ProgressBar.story.tsx b/src/components/ProgressBar/ProgressBar.story.tsx
new file mode 100644
index 0000000000..f96fe01469
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.story.tsx
@@ -0,0 +1,97 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { select, number, boolean } from '@storybook/addon-knobs';
+import { css } from '@emotion/core';
+
+import docs from './ProgressBar.docs.mdx';
+import { ProgressBar, ProgressBarProps } from './ProgressBar';
+
+export default {
+  title: 'Components/ProgressBar',
+  component: ProgressBar,
+  parameters: {
+    docs: { page: docs },
+    jest: ['ProgressBar']
+  }
+};
+
+const variants = ['primary', 'secondary'] as const;
+const sizes = ['byte', 'kilo', 'mega'] as const;
+
+const BaseProgressBar = (props: ProgressBarProps) => (
+  <ProgressBar
+    variant={select('Variant', variants, 'primary')}
+    size={select('Size', sizes, 'kilo')}
+    css={css`
+      min-width: 500px;
+      max-width: 90%;
+    `}
+    {...props}
+  />
+);
+
+export const Steps = () => (
+  <BaseProgressBar
+    value={number('Value', 3)}
+    max={number('Maximum value', 10)}
+  />
+);
+
+export const Timer = () => (
+  <BaseProgressBar
+    duration={number('Duration', 3000)}
+    paused={boolean('Paused', false)}
+    loop={boolean('Loop', true)}
+  />
+);
+
+export const Labelled = () => {
+  const max = number('Maximum value', 10);
+  const value = number('Value', 3);
+  const fraction = `${value}/${max}`;
+  const percentage = `${(value / max) * 100}%`;
+  return (
+    <>
+      <BaseProgressBar value={value} max={max}>
+        {fraction}
+      </BaseProgressBar>
+      <BaseProgressBar value={value} max={max}>
+        {percentage}
+      </BaseProgressBar>
+    </>
+  );
+};
+
+export const Variants = () => {
+  const max = number('Maximum value', 10);
+  const value = number('Value', 3);
+  return variants.map(variant => (
+    <BaseProgressBar key={variant} variant={variant} value={value} max={max}>
+      {variant}
+    </BaseProgressBar>
+  ));
+};
+
+export const Sizes = () => {
+  const max = number('Maximum value', 10);
+  const value = number('Value', 3);
+  return sizes.map(size => (
+    <BaseProgressBar key={size} size={size} value={value} max={max}>
+      {size}
+    </BaseProgressBar>
+  ));
+};
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
new file mode 100644
index 0000000000..b3a0e3388e
--- /dev/null
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,243 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ReactElement, ReactNode } from 'react';
+import { css, keyframes } from '@emotion/core';
+
+import styled, { StyleProps } from '../../styles/styled';
+import { textKilo } from '../../styles/style-helpers';
+import { uniqueId } from '../../util/id';
+
+interface BaseProps {
+  children?: ReactNode;
+  /**
+   * Choose from 2 style variants. Default: 'primary'.
+   */
+  variant?: 'primary' | 'secondary';
+  /**
+   * Choose from 3 sizes. Default: 'kilo'.
+   */
+  size?: 'byte' | 'kilo' | 'mega';
+}
+
+interface StepProgressProps {
+  /**
+   * A number greater than zero, indicating how much work the task requires.
+   */
+  max?: number;
+  /**
+   * A number between 0 and max, indicating how much of the task has been
+   * completed.
+   */
+  value?: number;
+}
+
+interface TimeProgressProps {
+  /**
+   * The time it takes the progress bar to fill up in milliseconds.
+   */
+  duration?: number;
+  /**
+   * Whether the progress animation should loop indefinitely.
+   */
+  loop?: boolean;
+  /**
+   * Whether the animation should the paused.
+   */
+  paused?: boolean;
+}
+
+export type ProgressBarProps = BaseProps &
+  StepProgressProps &
+  TimeProgressProps;
+
+type ReturnType = ReactElement<any, any> | null;
+
+const wrapperStyles = () => css`
+  display: flex;
+  align-items: center;
+`;
+
+const ProgressBarWrapper = styled('div')<{}>(wrapperStyles);
+
+const baseStyles = ({ theme }: StyleProps) => css`
+  label: progress-bar;
+  background-color: ${theme.colors.n200};
+  border-radius: ${theme.borderRadius.pill};
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    background-color: ${theme.colors.p500};
+    transition: width 0.05s ease-out;
+    height: 100%;
+    width: 1px;
+  }
+`;
+
+const taskStyles = ({ value = 0, max = 1 }: StepProgressProps) => {
+  const width = value && max ? (value / max) * 100 : 0;
+  return css`
+    &::after {
+      width: ${width}%;
+    }
+  `;
+};
+
+const oneAnimation = keyframes`
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+`;
+
+const loopAnimation = keyframes`
+  0% {
+    width: 0%;
+    transform: translateX(0%);
+  }
+
+  90% {
+    width: 100%;
+    transform: translateX(0%);
+  }
+
+  100% {
+    width: 100%;
+    transform: translateX(100%);
+  }
+`;
+
+const timedStyles = ({
+  duration = 3000,
+  loop = false,
+  paused = false
+}: TimeProgressProps) => css`
+  &::after {
+    animation-name: ${loop ? loopAnimation : oneAnimation};
+    animation-duration: ${duration}ms;
+    animation-play-state: ${paused ? 'paused' : 'running'};
+    animation-fill-mode: forwards;
+    animation-iteration-count: ${loop ? 'infinite' : 1};
+  }
+`;
+
+const variantStyles = ({
+  theme,
+  variant = 'primary'
+}: StyleProps & BaseProps) => {
+  const variantMap = {
+    primary: theme.colors.p500,
+    secondary: theme.colors.n900
+  };
+  return css`
+    label: ${`progress-bar--${variant}`};
+
+    &::after {
+      background-color: ${variantMap[variant]};
+    }
+  `;
+};
+
+const sizeStyles = ({ theme, size = 'kilo' }: StyleProps & BaseProps) => {
+  const sizeMap = {
+    byte: theme.spacings.bit,
+    kilo: theme.spacings.byte,
+    mega: theme.spacings.mega
+  };
+  return css({
+    label: `progress-bar--${size}`,
+    height: sizeMap[size]
+  });
+};
+
+const TaskProgress = styled('span')<BaseProps & StepProgressProps>(
+  baseStyles,
+  variantStyles,
+  sizeStyles,
+  taskStyles
+);
+
+const TimeProgress = styled('span')<BaseProps & TimeProgressProps>(
+  baseStyles,
+  variantStyles,
+  sizeStyles,
+  timedStyles
+);
+
+const labelStyles = ({ theme }: StyleProps) => css`
+  label: progress-bar__label;
+  ${textKilo({ theme })};
+  margin-left: ${theme.spacings.byte};
+`;
+
+const ProgressBarLabel = styled('span')<{}>(labelStyles);
+
+/**
+ * The ProgressBar component communicates the progress of a task or timer
+ * to the user.
+ */
+export function ProgressBar(props: BaseProps & StepProgressProps): ReturnType;
+export function ProgressBar(props: BaseProps & TimeProgressProps): ReturnType;
+export function ProgressBar({
+  children,
+  max,
+  value,
+  size,
+  variant,
+  duration,
+  loop,
+  paused,
+  ...props
+}: ProgressBarProps) {
+  const ariaId = uniqueId('progress-bar_');
+  return (
+    <ProgressBarWrapper {...props}>
+      {max || value ? (
+        <TaskProgress
+          role="progressbar"
+          aria-valuenow={value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+          aria-labelledby={ariaId}
+          max={max}
+          value={value}
+          size={size}
+          variant={variant}
+        />
+      ) : (
+        <TimeProgress
+          aria-labelledby={ariaId}
+          duration={duration}
+          loop={loop}
+          paused={paused}
+          size={size}
+          variant={variant}
+        />
+      )}
+      <ProgressBarLabel id={ariaId}>{children}</ProgressBarLabel>
+    </ProgressBarWrapper>
+  );
+}
diff --git a/src/components/ProgressBar/__snapshots__/ProgressBar.spec.js.snap b/src/components/ProgressBar/__snapshots__/ProgressBar.spec.js.snap
deleted file mode 100644
index a12ac17b10..0000000000
--- a/src/components/ProgressBar/__snapshots__/ProgressBar.spec.js.snap
+++ /dev/null
@@ -1,131 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProgressBar should render with default styles 1`] = `
-.circuit-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.circuit-0 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
-  position: relative;
-  width: 100%;
-  height: 8px;
-  overflow: hidden;
-}
-
-.circuit-0::after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 0%;
-  background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
-  -webkit-transition: width 0.05s ease-out;
-  transition: width 0.05s ease-out;
-}
-
-.circuit-2 {
-  font-size: 13px;
-  line-height: 20px;
-  margin-left: 8px;
-}
-
-<div
-  class="circuit-4 circuit-5"
->
-  <span
-    aria-labelledby="progress-bar_1"
-    aria-valuemax="1"
-    aria-valuemin="0"
-    aria-valuenow="0"
-    class="circuit-0 circuit-1"
-    max="1"
-    role="progressbar"
-    value="0"
-  />
-  <span
-    class="circuit-2 circuit-3"
-    id="progress-bar_1"
-  />
-</div>
-`;
-
-exports[`ProgressBar should render with progress styles 1`] = `
-.circuit-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.circuit-2 {
-  font-size: 13px;
-  line-height: 20px;
-  margin-left: 8px;
-}
-
-.circuit-0 {
-  background-color: #FAFBFC;
-  border: 1px solid #D8DDE1;
-  border-radius: 4px;
-  position: relative;
-  width: 100%;
-  height: 8px;
-  overflow: hidden;
-}
-
-.circuit-0::after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 50%;
-  background-color: #3388FF;
-  border: 1px solid #1760CE;
-  box-shadow: inset 0 1px 0 0 #AFD0FE;
-  border-radius: calc(4px - 1px) 0 0 calc(4px - 1px);
-  -webkit-transition: width 0.05s ease-out;
-  transition: width 0.05s ease-out;
-}
-
-<div
-  class="circuit-4 circuit-5"
->
-  <span
-    aria-labelledby="progress-bar_2"
-    aria-valuemax="1"
-    aria-valuemin="0"
-    aria-valuenow="0.5"
-    class="circuit-0 circuit-1"
-    max="1"
-    role="progressbar"
-    value="0.5"
-  />
-  <span
-    class="circuit-2 circuit-3"
-    id="progress-bar_2"
-  />
-</div>
-`;
diff --git a/src/components/ProgressBar/__snapshots__/ProgressBar.spec.tsx.snap b/src/components/ProgressBar/__snapshots__/ProgressBar.spec.tsx.snap
new file mode 100644
index 0000000000..8fb7688ca4
--- /dev/null
+++ b/src/components/ProgressBar/__snapshots__/ProgressBar.spec.tsx.snap
@@ -0,0 +1,340 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar step-based should render with default styles 1`] = `
+.circuit-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.circuit-0 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 8px;
+}
+
+.circuit-0::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  width: 50%;
+}
+
+.circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+<div
+  class="circuit-2"
+>
+  <span
+    aria-labelledby="progress-bar_1"
+    aria-valuemax="1"
+    aria-valuemin="0"
+    aria-valuenow="0.5"
+    class="circuit-0"
+    max="1"
+    role="progressbar"
+    value="0.5"
+  />
+  <span
+    class="circuit-1"
+    id="progress-bar_1"
+  />
+</div>
+`;
+
+exports[`ProgressBar time-based should render with default styles 1`] = `
+@keyframes animation-0 {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+.circuit-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-0 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 8px;
+}
+
+.circuit-0::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  -webkit-animation-name: animation-0;
+  animation-name: animation-0;
+  -webkit-animation-duration: 3000ms;
+  animation-duration: 3000ms;
+  -webkit-animation-play-state: running;
+  animation-play-state: running;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+
+<div
+  class="circuit-2"
+>
+  <span
+    aria-labelledby="progress-bar_3"
+    class="circuit-0"
+  />
+  <span
+    class="circuit-1"
+    id="progress-bar_3"
+  />
+</div>
+`;
+
+exports[`ProgressBar time-based should render with loop styles 1`] = `
+@keyframes animation-0 {
+  0% {
+    width: 0%;
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  90% {
+    width: 100%;
+    -webkit-transform: translateX(0%);
+    -ms-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  100% {
+    width: 100%;
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+}
+
+.circuit-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-0 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 8px;
+}
+
+.circuit-0::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  -webkit-animation-name: animation-0;
+  animation-name: animation-0;
+  -webkit-animation-duration: 3000ms;
+  animation-duration: 3000ms;
+  -webkit-animation-play-state: running;
+  animation-play-state: running;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+<div
+  class="circuit-2"
+>
+  <span
+    aria-labelledby="progress-bar_5"
+    class="circuit-0"
+    loop=""
+  />
+  <span
+    class="circuit-1"
+    id="progress-bar_5"
+  />
+</div>
+`;
+
+exports[`ProgressBar time-based should render with paused styles 1`] = `
+@keyframes animation-0 {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+@keyframes animation-0 {
+  0% {
+    width: 0%;
+  }
+
+  100% {
+    width: 100%;
+  }
+}
+
+.circuit-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.circuit-1 {
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.circuit-0 {
+  background-color: #EEF0F2;
+  border-radius: 999999px;
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  height: 8px;
+}
+
+.circuit-0::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #3388FF;
+  -webkit-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+  height: 100%;
+  width: 1px;
+}
+
+.circuit-0::after {
+  background-color: #3388FF;
+}
+
+.circuit-0::after {
+  -webkit-animation-name: animation-0;
+  animation-name: animation-0;
+  -webkit-animation-duration: 3000ms;
+  animation-duration: 3000ms;
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-iteration-count: 1;
+  animation-iteration-count: 1;
+}
+
+<div
+  class="circuit-2"
+>
+  <span
+    aria-labelledby="progress-bar_4"
+    class="circuit-0"
+  />
+  <span
+    class="circuit-1"
+    id="progress-bar_4"
+  />
+</div>
+`;
diff --git a/src/components/ProgressBar/index.js b/src/components/ProgressBar/index.ts
similarity index 93%
rename from src/components/ProgressBar/index.js
rename to src/components/ProgressBar/index.ts
index 5466a6eaa2..027ee85b20 100644
--- a/src/components/ProgressBar/index.js
+++ b/src/components/ProgressBar/index.ts
@@ -13,6 +13,6 @@
  * limitations under the License.
  */
 
-import ProgressBar from './ProgressBar';
+import { ProgressBar } from './ProgressBar';
 
 export default ProgressBar;