diff --git a/package.json b/package.json
index 984d347..63342c7 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "highlight.js": ">=10.4.1",
     "live-server": "^1.2.1",
     "mkdirp": "^1.0.4",
+    "postcss": "^8.5.4",
     "postcss-calc": "^7.0.2",
     "postcss-copy": "^7.1.0",
     "postcss-css-variables": "^0.14.0",
@@ -44,6 +45,5 @@
     "postcss-inline": "^1.2.0",
     "postcss-inline-svg": "^4.1.0",
     "postcss-nested": "^4.2.1"
-  },
-  "dependencies": {}
+  }
 }
diff --git a/themes/98/_progressbar.scss b/themes/98/_progressbar.scss
new file mode 100644
index 0000000..0488c02
--- /dev/null
+++ b/themes/98/_progressbar.scss
@@ -0,0 +1,116 @@
+/*-------------------------------------------*\
+    ProgressBar
+\*-------------------------------------------*/
+
+@keyframes sliding {
+  0% {
+    transform: translateX(-40%);
+  }
+  100% {
+    transform: translateX(140%);
+  }
+}
+
+progress {
+  --determinate-track: repeating-linear-gradient(
+    to right,
+    navy 0px,
+    navy 10px,
+    transparent 10px,
+    transparent 12px
+  );
+  --indeterminate-track: repeating-linear-gradient(
+    to right,
+    transparent 0px,
+    transparent 10px,
+    navy 10px,
+    navy 20px,
+    transparent 20px,
+    transparent 22px,
+    navy 22px,
+    navy 32px,
+    transparent 32px,
+    transparent 34px,
+    navy 34px,
+    navy 44px,
+    transparent 44px,
+    transparent 56px,
+    transparent 100%
+  );
+  --indeterminate-track-animation: sliding 2s linear 0s infinite;
+  --track-shadow: inset -2px -2px #dfdfdf, inset 2px 2px grey;
+  --track-height: 24px;
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  height: var(--track-height);
+
+  border: 0;
+
+  padding: 4px;
+
+  overflow: hidden;
+  background-color: #c0c0c0;
+
+  box-sizing: border-box;
+  box-shadow: var(--track-shadow);
+
+  &:not(:indeterminate) {
+    &::-webkit-progress-value {
+      background: var(--determinate-track);
+    }
+
+    &::-moz-progress-bar {
+      background: var(--determinate-track);
+    }
+  }
+
+  /* Indeterminate styles */
+  &:indeterminate {
+    position: relative;
+    will-change: left, right;
+
+    /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */
+    &::before {
+      content: "";
+      position: absolute;
+
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      z-index: 1;
+
+      box-sizing: border-box;
+      box-shadow: var(--track-shadow);
+    }
+
+    /* Real animated element */
+    &::after {
+      content: "";
+      position: absolute;
+
+      /* This thing mimic the padding in <progress>, I fear thats not 1:1, but it looks the same I guess */
+      top: 4px;
+      bottom: 4px;
+      width: 100%;
+
+      background: var(--indeterminate-track);
+      animation: var(--indeterminate-track-animation);
+    }
+
+    /* Uses ::after instead */
+    &::-webkit-progress-bar {
+      background-color: transparent;
+    }
+
+    /* Firefox */
+    &::-moz-progress-bar {
+      background: var(--indeterminate-track);
+      animation: var(--indeterminate-track-animation);
+    }
+  }
+}
diff --git a/themes/98/index.scss b/themes/98/index.scss
index 0544e1b..6c26f91 100644
--- a/themes/98/index.scss
+++ b/themes/98/index.scss
@@ -13,3 +13,4 @@
 @import "_tabs.scss";
 @import "_buttons.scss";
 @import "_treeview.scss";
+@import "_progressbar.scss";
diff --git a/themes/XP/_progressbar.scss b/themes/XP/_progressbar.scss
index d8e6b70..321d9a4 100644
--- a/themes/XP/_progressbar.scss
+++ b/themes/XP/_progressbar.scss
@@ -3,159 +3,139 @@
 \*-------------------------------------------*/
 
 @keyframes sliding {
-    0% {
-      transform: translateX(-30px);
+  0% {
+    transform: translateX(-40%);
+  }
+  100% {
+    transform: translateX(140%);
+  }
+}
+
+progress {
+  --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;
+
+  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;
+
+  box-sizing: border-box;
+  box-shadow: var(--track-shadow);
+
+  /* Determinate styles */
+  &:not(:indeterminate) {
+    /* Chrome, Safari, Edge */
+    &::-webkit-progress-value {
+      background: var(--determinate-track);
     }
-    100% {
-      transform: translateX(100%);
+
+    /* Firefox */
+    &::-moz-progress-bar {
+      background: var(--determinate-track);
     }
   }
-  
-  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;
+
+  /* Indeterminate styles */
+  &:indeterminate {
+    position: relative;
+    will-change: left, right;
+
+    /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */
+    &::before {
+      content: "";
+      position: absolute;
+
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      z-index: 1;
+
+      box-sizing: border-box;
+      box-shadow: var(--track-shadow);
     }
-  
-    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);
-      }
+
+    /* Real animated element */
+    &::after {
+      content: "";
+      position: absolute;
+
+      /* This thing mimic the padding in <progress>, I fear thats not 1:1, but it looks the same I guess */
+      top: 1px;
+      bottom: 1px;
+      left: 2px;
+      right: 2px;
+      width: 100%;
+
+      background: var(--indeterminate-track);
+      animation: var(--indeterminate-track-animation);
     }
-  
-    /* 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);
-      }
+
+    /* Uses ::after instead */
+    &::-webkit-progress-bar {
+      background-color: transparent;
+    }
+
+    /* Firefox */
+    &::-moz-progress-bar {
+      background: var(--indeterminate-track);
+      animation: var(--indeterminate-track-animation);
     }
   }
-  
\ No newline at end of file
+}