Added progress bars

source/css/progress-bars.css

@@ -0,0 +1,62 @@
+/*! Progress Bars */
+
+@keyframes progress-indeterminate {
+  0% {
+    left: -50%;
+  }
+
+  100% {
+    left: 100%;
+  }
+}
+
+.progress {
+  position: relative;
+  width: 100%;
+  height: var(--progress-height);
+  background-color: var(--progress-bg-color);
+  border-radius: var(--progress-border-radius);
+  display: block;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.progress-bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  font-size: var(--progress-font-size);
+  line-height: var(--progress-height);
+  text-align: center;
+  color: var(--progress-color);
+  background-color: var(--progress-bar-bg-color);
+  transition: var(--progress-speed-change) width;
+  user-select: none;
+  cursor: default;
+}
+
+.progress-small {
+  height: var(--progress-height-small);
+}
+
+.progress-small .progress-bar {
+  line-height: var(--progress-height-small);
+  font-size: var(--progress-font-size-small);
+}
+
+.progress-big {
+  height: var(--progress-height-big);
+}
+
+.progress-big .progress-bar {
+  height: var(--progress-height-big);
+  line-height: var(--progress-height-big);
+  font-size: var(--progress-font-size-big);
+}
+
+.progress-indeterminate .progress-bar {
+  width: 50% !important;
+  animation: progress-indeterminate linear var(--progress-speed-indeterminate) infinite;
+}

source/css/shoelace.css

@@ -20,6 +20,7 @@
 @import url('dropdowns.css');
 @import url('forms.css');
 @import url('loaders.css');
+@import url('progress-bars.css');
 @import url('switches.css');
 @import url('tabs.css');
 @import url('tables.css');

source/css/variables.css

@@ -210,6 +210,20 @@
   --loader-spacing-x: var(--component-spacing-small);
   --loader-spacing-y: 0;
 
+  /* Progress */
+  --progress-font-size: var(--input-font-size);
+  --progress-font-size-small: var(--input-font-size-small);
+  --progress-font-size-big: var(--input-font-size-big);
+  --progress-height: var(--input-height);
+  --progress-height-small: var(--input-height-small);
+  --progress-height-big: var(--input-height-big);
+  --progress-color: var(--color-white);
+  --progress-bg-color: var(--component-bg-color);
+  --progress-bar-bg-color: var(--color-primary);
+  --progress-border-radius: var(--component-border-radius);
+  --progress-speed-change: .2s;
+  --progress-speed-indeterminate: 1.5s;
+
   /* Spacing Utilties */
   --spacing-small: var(--component-spacing);
   --spacing-medium: calc(var(--component-spacing) * 2);

source/docs/forms.md

@@ -82,10 +82,6 @@ Form controls are styled at 100% of the width of their parent element.
       <td><code>&lt;input type=&quot;time&quot;&gt;</code></td>
       <td><input type="time"></td>
     </tr>
-    <tr>
-      <td><code>&lt;progress&gt;&lt;/progress&gt;</code></td>
-      <td><progress max="100" value="50"></progress></td>
-    </tr>
     <tr>
       <td><code>&lt;select&gt;</code></td>
       <td>

source/docs/progress-bars.md

@@ -0,0 +1,51 @@
+---
+layout: default.html
+title: Progress Bars
+description: These progress bars are easy to create and render consistently in all browsers.
+---
+
+## Progress Bars
+
+HTML5 introduced the `<progress>` element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.
+
+Create a progress bar with the following markup. Use the `progress-small` and `progress-big` modifiers to change the size. To set the state, use a [sizing utility](utilities.html#sizing-utilities) or set the width explicitly on the `progress-bar` element.
+
+An optional text label can be included inside the `progress-bar` element.
+
+```html
+<div class="progress progress-small">
+  <div class="progress-bar width-25">25%</div>
+</div>
+
+<div class="progress">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-big">
+  <div class="progress-bar width-75">75%</div>
+</div>
+```
+
+<div class="progress progress-small">
+  <div class="progress-bar width-25">25%</div>
+</div>
+
+<div class="progress">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-big">
+  <div class="progress-bar width-75">75%</div>
+</div>
+
+When progress can’t be determined, use the `progress-indeterminate` modifier to set an indeterminate state.
+
+```html
+<div class="progress progress-indeterminate">
+  <div class="progress-bar"></div>
+</div>
+```
+
+<div class="progress progress-indeterminate">
+  <div class="progress-bar"></div>
+</div>

source/layouts/default.html

@@ -38,6 +38,7 @@
       <a href="dropdowns.html">Dropdowns</a>
       <a href="forms.html">Forms</a>
       <a href="loaders.html">Loaders</a>
+      <a href="progress-bars.html">Progress Bars</a>
       <a href="switches.html">Switches</a>
       <a href="tabs.html">Tabs</a>
       <a href="tables.html">Tables</a>