Add progress bar

css/pico.classless.css

@@ -1545,11 +1545,6 @@ hr {
   border-top: 1px solid var(--muted-border);
 }
 
-progress {
-  display: inline-block;
-  vertical-align: baseline;
-}
-
 [hidden],
 template {
   display: none;
@@ -1880,6 +1875,64 @@ aside li a {
   padding: calc(var(--spacing-gutter) / 2);
 }
 
+/**
+ * Progress
+ */
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  width: 100%;
+  height: .5rem;
+  margin-bottom: calc(var(--spacing-typography) / 2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--block-round);
+  background-color: var(--muted-background);
+  color: var(--primary);
+}
+
+progress::-webkit-progress-bar {
+  border-radius: var(--block-round);
+  background: transparent;
+}
+
+progress[value]::-webkit-progress-value {
+  background-color: var(--primary);
+}
+
+progress::-moz-progress-bar {
+  background-color: var(--primary);
+}
+
+progress: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;
+}
+
+progress:indeterminate[value]::-webkit-progress-value {
+  background-color: transparent;
+}
+
+progress:indeterminate::-moz-progress-bar {
+  background-color: transparent;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 /**
  * Tooltip ([data-tooltip])
  */

css/pico.css

@@ -1778,11 +1778,6 @@ hr {
   border-top: 1px solid var(--muted-border);
 }
 
-progress {
-  display: inline-block;
-  vertical-align: baseline;
-}
-
 [hidden],
 template {
   display: none;
@@ -2113,6 +2108,64 @@ aside li a {
   padding: calc(var(--spacing-gutter) / 2);
 }
 
+/**
+ * Progress
+ */
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  width: 100%;
+  height: .5rem;
+  margin-bottom: calc(var(--spacing-typography) / 2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--block-round);
+  background-color: var(--muted-background);
+  color: var(--primary);
+}
+
+progress::-webkit-progress-bar {
+  border-radius: var(--block-round);
+  background: transparent;
+}
+
+progress[value]::-webkit-progress-value {
+  background-color: var(--primary);
+}
+
+progress::-moz-progress-bar {
+  background-color: var(--primary);
+}
+
+progress: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;
+}
+
+progress:indeterminate[value]::-webkit-progress-value {
+  background-color: transparent;
+}
+
+progress:indeterminate::-moz-progress-bar {
+  background-color: transparent;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 /**
  * Tooltip ([data-tooltip])
  */

css/pico.fluid.classless.css

@@ -1541,11 +1541,6 @@ hr {
   border-top: 1px solid var(--muted-border);
 }
 
-progress {
-  display: inline-block;
-  vertical-align: baseline;
-}
-
 [hidden],
 template {
   display: none;
@@ -1876,6 +1871,64 @@ aside li a {
   padding: calc(var(--spacing-gutter) / 2);
 }
 
+/**
+ * Progress
+ */
+progress {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  width: 100%;
+  height: .5rem;
+  margin-bottom: calc(var(--spacing-typography) / 2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--block-round);
+  background-color: var(--muted-background);
+  color: var(--primary);
+}
+
+progress::-webkit-progress-bar {
+  border-radius: var(--block-round);
+  background: transparent;
+}
+
+progress[value]::-webkit-progress-value {
+  background-color: var(--primary);
+}
+
+progress::-moz-progress-bar {
+  background-color: var(--primary);
+}
+
+progress: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;
+}
+
+progress:indeterminate[value]::-webkit-progress-value {
+  background-color: transparent;
+}
+
+progress:indeterminate::-moz-progress-bar {
+  background-color: transparent;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
 /**
  * Tooltip ([data-tooltip])
  */

docs/index.html

@@ -77,6 +77,7 @@
                 <li><a href="#accordions" class="secondary">Accordions</a></li>
                 <li><a href="#cards" class="secondary">Cards</a></li>
                 <li><a href="#navs" class="secondary">Navs</a></li>
+                <li><a href="#progress" class="secondary">Progress</a></li>
                 <li><a href="#tooltips" class="secondary">Tooltips</a></li>
               </ul>
             </details>
@@ -1074,6 +1075,22 @@
             </article>
           </section><!-- ./ Docs: Nav -->
 
+          <!-- Docs: Progress -->
+          <section id="progress">
+            <hgroup>
+              <h2>Progress</h2>
+              <h3>Progress bar element in pure HTML, without JavaScript.</h3>
+            </hgroup>
+            <article aria-label="Tooltips examples">
+              <progress value="25" max="100"></progress>
+              <progress indeterminate="true"></progress>
+
+<pre><code>&lt;<b>progress</b> <i>value</i>=<u>"25</u></i>" <i>max</i>=<u>"100"</u>&gt;&lt;/<b>progress</b>&gt;
+&lt;<b>progress</b> <i>indeterminate</i>=<u>"true"</u>&gt;&lt;/<b>progress</b>&gt;</code></pre>
+
+            </article>
+          </section><!-- ./ Docs: Progress -->
+
           <!-- Docs: Tooltips -->
           <section id="tooltips">
             <hgroup>
@@ -1090,7 +1107,7 @@
 &lt;<b>p</b>&gt;&lt;<b>button</b> <i>data-tooltip</i>=<u>"Tooltip"</u>&gt;Tooltip on a button&lt;/<b>button</b>&gt;&lt;/<b>p</b>&gt;</code></pre>
 
             </article>
-          </section><!-- ./ Docs: Nav -->
+          </section><!-- ./ Docs: Tooltips -->
 
           <!-- Love -->
           <section id="love">

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