Merge pull request #170 from jdan/progress-indicator

Progress indicator (a.k.a. progress bar control)

docs/index.html.ejs

@@ -43,6 +43,7 @@
           <li><a href="#tree-view">TreeView</a></li>
           <li><a href="#tabs">Tabs</a></li>
           <li><a href="#table-view">TableView</a></li>
+          <li><a href="#progress-indicator">Progress Indicator</a></li>
         </ul>
       </li>
       <li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
@@ -882,7 +883,6 @@
               </div>
     </section>
     <section class="component">
-
       <h3 id="table-view">TableView</h3>
       <div>
         <p>
@@ -972,6 +972,35 @@
     </div>
     </section>
 
+    <section class="component">
+      <h3 id="progress-indicator">Progress Indicator</h3>
+      <div>
+        <blockquote>
+          You can use a <em>progress indicator</em>, also known as a <em>progress bar control</em>, to show the percentage of completion of a lengthy operation.
+
+          <footer>
+            &mdash; Microsoft Windows User Experience p. 189
+          </footer>
+        </blockquote>
+
+        <p>
+          There are two types of progress bars: solid and segmented. The solid version is the default. To declare a segmented bar, you should use the <code>segmented</code> class.
+        </p>
+
+        <%- example(`
+          <div class="progress-indicator">
+            <span class="progress-indicator-bar"  style="width: 40%;" />
+          </div>
+        `) %>
+
+        <%- example(`
+          <div class="progress-indicator segmented">
+            <span class="progress-indicator-bar" style="width: 40%;" />
+          </div>
+        `) %>
+      </div>
+    </section>
+
     <h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
 
     <p>

style.css

@@ -891,3 +891,35 @@ table > tbody > tr > * {
   padding: 0 var(--grouped-element-spacing);
   height: 14px;
 }
+
+.progress-indicator {
+	height: 32px;
+	position: relative;
+  box-shadow: var(--border-sunken-inner);
+  padding: 4px 4px;
+  border: none;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: 0;
+}
+
+
+.progress-indicator > .progress-indicator-bar {
+  height: 100%;
+  display: block;
+  background-color: var(--dialog-blue);
+}
+
+.progress-indicator.segmented > .progress-indicator-bar {
+  width: 100%;
+  background-color: transparent; /* resets the background color which is set to blue in the non-segmented selector */
+  background-image: linear-gradient(
+    90deg,
+    var(--dialog-blue) 0 16px,
+    transparent 0 2px
+  );
+  background-repeat: repeat;
+  background-size: 18px 100%;
+}