build progress bar windows xp theme

botoxparty · Oct 19, 2022 · 9d80321 · 9d80321
1 parent 37d67d5
commit 9d80321
Show file tree

Hide file tree

Showing 3 changed files with 216 additions and 11 deletions.
diff --git a/docs/index.html.ejs b/docs/index.html.ejs
@@ -41,6 +41,7 @@
             </ul>
           </li>
           <li><a href="#tree-view">TreeView</a></li>
+          <li><a href="#progress-bar">ProgressBar</a></li>
         </ul>
       </li>
       <li><a href="#issues-contributing-etc">Issues, Contributing, etc.</a></li>
@@ -796,7 +797,7 @@ import "xp.css/dist/98.css";</pre>
         </blockquote>
 
         <p>
-          You can render a status bar with the <code>status-bar</code> class, 
+          You can render a status bar with the <code>status-bar</code> class,
           and <code>status-bar-field</code> for every child text element.
         </p>
 
@@ -821,7 +822,7 @@ import "xp.css/dist/98.css";</pre>
         </div>
       `) %>
 
-       
+
     </section>
 
     <section class="component">
@@ -909,6 +910,47 @@ import "xp.css/dist/98.css";</pre>
       </div>
     </section>
 
+    <section class="component">
+      <h3 id="progress-bar">ProgressBar</h3>
+      <div>
+        <blockquote>
+          With a <em>progress bar</em>, users can follow the progress
+          of a lengthy operation. A progress bar may either show an approximate
+          percentage of completion (determinate) or indicate that an operation is
+          ongoing (indeterminate)
+          <footer>
+              &mdash; <a href="https://learn.microsoft.com/en-us/windows/win32/uxguide/progress-bars">Microsoft Windows
+            User Experience - Progress Bars</a>
+          </footer>
+        </blockquote>
+
+        <p>
+          To render a progress bar, use a <code>&lt;progress&gt;</code> element.
+        </p>
+
+        <p>
+          The <code>max</code> attribute describes how much work the task indicated by the progress element requires, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
+        </p>
+
+        <p>
+          The <code>value</code> attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
+        </p>
+
+        <%- example(`
+          <progress max="100" value="70"></progress>
+        `) %>
+
+        <p>
+          If there is no <code>value</code> attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
+        </p>
+
+        <%- example(`
+          <progress></progress>
+        `) %>
+
+      </div>
+    </section>
+
     <h2 id="issues-contributing-etc">Issues, Contributing, etc.</h2>
 
     <p>

diff --git a/themes/XP/_progressbar.scss b/themes/XP/_progressbar.scss
@@ -0,0 +1,161 @@
+/*-------------------------------------------*\
+    ProgressBar
+\*-------------------------------------------*/
+
+@keyframes sliding {
+    0% {
+      transform: translateX(-30px);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  progress {
+    &,
+    &[value],
+    &:not([value]) {
+      --determinate-track: repeating-linear-gradient(
+          to right,
+          #fff 0px,
+          #fff 2px,
+          transparent 2px,
+          transparent 10px
+        ),
+        linear-gradient(
+          to bottom,
+          #acedad 0%,
+          #7be47d 14%,
+          #4cda50 28%,
+          #2ed330 42%,
+          #42d845 57%,
+          #76e275 71%,
+          #8fe791 85%,
+          #ffffff 100%
+        );
+      --indeterminate-track: repeating-linear-gradient(
+          to right,
+          transparent 0px,
+          transparent 8px,
+          #fff 8px,
+          #fff 10px,
+          transparent 10px,
+          transparent 18px,
+          #fff 18px,
+          #fff 20px,
+          transparent 20px,
+          transparent 28px,
+          #fff 28px,
+          #fff 100%
+        ),
+        linear-gradient(
+          to bottom,
+          #acedad 0%,
+          #7be47d 14%,
+          #4cda50 28%,
+          #2ed330 42%,
+          #42d845 57%,
+          #76e275 71%,
+          #8fe791 85%,
+          #ffffff 100%
+        );
+      --indeterminate-track-animation: sliding 2s linear 0s infinite;
+      --track-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1);
+      --track-height: 14px;
+    }
+
+    box-sizing: border-box;
+
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+
+    height: var(--track-height);
+
+    border: 1px solid #686868;
+    border-radius: 4px;
+
+    padding: 1px 2px 1px 0px;
+
+    overflow: hidden;
+    background-color: #fff;
+
+    -webkit-box-shadow: var(--track-shadow);
+    -moz-box-shadow: var(--track-shadow);
+    box-shadow: var(--track-shadow);
+
+    /* Determinate styles */
+    &[value] {
+      /* Chrome, Safari, Edge */
+      &::-webkit-progress-bar {
+        background-color: transparent;
+      }
+      &::-webkit-progress-value {
+        border-radius: 2px;
+        background: var(--determinate-track);
+      }
+      /* Firefox */
+      &::-moz-progress-bar {
+        border-radius: 2px;
+        background: var(--determinate-track);
+      }
+    }
+
+    /* Indeterminate styles */
+    &:not([value]) {
+      /* Apply for Chrome, Safari and Edge but animation only works in Safari */
+      &::-webkit-progress-bar {
+        width: 100%;
+        background: var(--indeterminate-track);
+        animation: var(--indeterminate-track-animation);
+      }
+
+      /* Solution for Chrome and Edge: animate pseudo element :after */
+      & {
+        position: relative;
+      }
+      /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */
+      &::before {
+        box-sizing: border-box;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        background-color: #fff;
+
+        -webkit-box-shadow: var(--track-shadow);
+        -moz-box-shadow: var(--track-shadow);
+        box-shadow: var(--track-shadow);
+      }
+      /* Real animated element */
+      &::after {
+        box-sizing: border-box;
+        content: "";
+        position: absolute;
+        top: 1px;
+        left: 2px;
+
+        width: 100%;
+        height: calc(100% - 2px);
+
+        padding: 1px 2px 1px 2px;
+
+        border-radius: 2px;
+
+        background: var(--indeterminate-track);
+        animation: var(--indeterminate-track-animation);
+      }
+
+      /* Firefox */
+      &::-moz-progress-bar {
+        width: 100%;
+        background: var(--indeterminate-track);
+        animation: var(--indeterminate-track-animation);
+      }
+    }
+  }
+
diff --git a/themes/XP/index.scss b/themes/XP/index.scss
@@ -5,12 +5,14 @@
  * https://github.com/botoxparty/XP.css/blob/main/LICENSE
  */
 
-@import "../../gui/index.scss";
-@import "_variables.scss";
-@import "_global.scss";
-@import "_window.scss";
-@import "_buttons.scss";
-@import "_forms.scss";
-@import "_groupbox.scss";
-@import "_tabs.scss";
-@import "_treeview.scss";
+ @import "../../gui/index.scss";
+ @import "_variables.scss";
+ @import "_global.scss";
+ @import "_window.scss";
+ @import "_buttons.scss";
+ @import "_forms.scss";
+ @import "_groupbox.scss";
+ @import "_tabs.scss";
+ @import "_treeview.scss";
+ @import "_progressbar.scss";
+