Feature/progress

assets/components/atoms/progress/progress-height.twig

@@ -0,0 +1,6 @@
+<div class="py-1">
+  <progress value="75" max="100" style="height: 1px"></progress>
+</div>
+<div class="py-1">
+  <progress value="75" max="100" style="height: 25px"></progress>
+</div>

assets/components/atoms/progress/progress-indeterminate.twig

@@ -0,0 +1 @@
+<progress max="100" value=""></progress>

assets/components/atoms/progress/progress.scss

@@ -0,0 +1,54 @@
+@charset 'utf-8';
+
+progress {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  background-color: $gray-100;
+  height: 0.5rem;
+}
+
+progress::-webkit-progress-bar {
+  background-color: transparent;
+}
+
+progress::-webkit-progress-value {
+  background-color: $red;
+  transition: width 0.6s ease;
+}
+
+progress::-moz-progress-bar {
+  background-color: $red;
+  transition: width 0.6s ease;
+}
+
+progress:indeterminate {
+  animation-duration: 1.5s;
+  animation-iteration-count: infinite;
+  animation-name: moveIndeterminate;
+  animation-timing-function: linear;
+  background-color: $gray-100;
+  background-image: linear-gradient(to right, $red 100%, $gray-100 100%);
+  background-position: top left;
+  background-repeat: no-repeat;
+  background-size: 200% 200%;
+  &::-webkit-progress-bar {
+    background-color: transparent;
+  }
+  &::-moz-progress-bar {
+    background-color: transparent;
+  }
+  &::-ms-fill {
+    animation-name: none;
+  }
+}
+
+@keyframes moveIndeterminate {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}

assets/components/atoms/progress/progress.twig

@@ -0,0 +1,15 @@
+<div class="py-1">
+  <progress value="0"></progress>
+</div>
+<div class="py-1">
+  <progress value="0.25"></progress>
+</div>
+<div class="py-1">
+  <progress value="1" max="2"></progress>
+</div>
+<div class="py-1">
+  <progress value="75" max="100"></progress>
+</div>
+<div class="py-1">
+  <progress value="100" max="100"></progress>
+</div>

assets/components/atoms/progress/progress.yml

@@ -0,0 +1,8 @@
+title: Progress
+name: progress
+variants:
+  - name: height
+    title: Height
+  - name: indeterminate
+    title: Indeterminate
+    notes: Omit the `value` property completely, set it to `undefined` or leave blank

assets/components/entrypoint.scss

@@ -41,6 +41,7 @@
 @import 'atoms/dropdown/dropdown';
 @import 'atoms/nav-toggle/nav-toggle';
 @import 'atoms/popover/popover';
+@import 'atoms/progress/progress';
 @import 'atoms/trapeze/trapeze';
 @import 'atoms/definition-list/definition-list';
 @import 'atoms/figure/figure';