Add progress bar

scss/components/_progress.scss

@@ -0,0 +1,74 @@
+/**
+ * Progress
+ */
+
+
+// Reboot based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// 1. Add the correct display in Edge 18- and IE
+// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
+progress {
+ display: inline-block; // 1
+ vertical-align: baseline; // 2
+}
+
+
+// Pico
+// ––––––––––––––––––––
+progress {
+
+  // Reset the default appearance
+  -webkit-appearance: none;
+    -moz-appearance: none;
+         appearance: none;
+
+  // Styles
+  display: inline-block;
+  width: 100%;
+  height: .5rem;
+  margin-bottom: calc(var(--spacing-typography) / 2);
+  overflow: hidden;
+
+  // Remove Firefox and Opera border
+  border: 0;
+  border-radius: var(--block-round);
+  background-color: var(--muted-background);
+
+  // IE10 uses `color` to set the bar background-color
+  color: var(--primary);
+
+  &::-webkit-progress-bar {
+    border-radius: var(--block-round);
+    background: transparent;
+  }
+  &[value]::-webkit-progress-value {
+    background-color: var(--primary);
+  }
+  &::-moz-progress-bar {
+    background-color: var(--primary);
+  }
+
+  &:indeterminate {
+    background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left / 150% 150% no-repeat;
+    animation: progress-indeterminate 1s linear infinite;
+
+    &[value]::-webkit-progress-value {
+      background-color: transparent;
+    }
+    &::-moz-progress-bar {
+      background-color: transparent;
+    }
+  }
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}

scss/content/_miscs.scss

@@ -18,13 +18,6 @@ hr {
   border-top: 1px solid var(--muted-border);
 }
 
-// 1. Add the correct display in Edge 18- and IE
-// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
-progress {
-  display: inline-block; // 1
-  vertical-align: baseline; // 2
-}
-
 // Add the correct display in IE 10+
 [hidden],
 template {

scss/pico.scss

@@ -28,13 +28,14 @@
 @import "content/table";                 // table, tr, td, ...
 @import "content/code";                  // pre, code, ...
 @import "content/accessibility";         // -ms-touch-action, aria-*
-@import "content/miscs";                 // hr, progress, template, [hidden], dialog, canvas
+@import "content/miscs";                 // hr, template, [hidden], dialog, canvas
 
 // Components
 @import "components/accordion";          // details, summary
 @import "components/card";               // article
 @import "components/card-sectioning";    // article > header, footer, pre
 @import "components/nav";                // nav
+@import "components/progress";           // progress
 @import "components/tooltip";            // data-tooltip
 
 // Reduce motion

scss/pico.slim.scss

@@ -51,13 +51,14 @@ $enable-important: false;
 @import "content/table";                   // table, tr, td, ...
 // @import "content/code";                 // pre, code, ...
 @import "content/accessibility";           // -ms-touch-action, aria-*
-// @import "content/miscs";                // hr, progress, template, [hidden], dialog
+// @import "content/miscs";                // hr, template, [hidden], dialog, canvas
 
 // Components
 // @import "components/accordion";         // details, summary
 // @import "components/card";              // article
 // @import "components/card-sectioning";   // article > header, footer, pre
 // @import "components/nav";               // nav
+// @import "components/progress";          // progress
 // @import "components/tooltip";           // data-tooltip
 
 // Reduce motion