Migrated progressbar

components/lib/theme/aura/index.js

@@ -10,6 +10,7 @@ import global from 'primevue/theme/aura/global';
 import inplace from 'primevue/theme/aura/inplace';
 import metergroup from 'primevue/theme/aura/metergroup';
 import panel from 'primevue/theme/aura/panel';
+import progressbar from 'primevue/theme/aura/progressbar';
 import scrollpanel from 'primevue/theme/aura/scrollpanel';
 import scrolltop from 'primevue/theme/aura/scrolltop';
 import skeleton from 'primevue/theme/aura/skeleton';
@@ -137,6 +138,7 @@ export default {
         metergroup,
         inplace,
         panel,
+        progressbar,
         scrollpanel,
         scrolltop,
         skeleton,

components/lib/theme/aura/progressbar/index.js

@@ -0,0 +1,139 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    background: '{surface.200}'
+                }
+            },
+            dark: {
+                root: {
+                    background: '{surface.700}'
+                }
+            }
+        }
+    },
+    css: `
+.p-progressbar {
+    position: relative;
+    overflow: hidden;
+    border: 0 none;
+    height: 1.25rem;
+    background: var(--p-progressbar-background);
+    border-radius: var(--p-rounded-base);
+}
+
+.p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: var(--p-primary-color);
+}
+
+.p-progressbar-label {
+    color: var(--p-primary-inverse-color);
+    line-height: 1.25rem;
+    font-size: .75rem;
+    font-weight: 600;
+}
+
+.p-progressbar-determinate .p-progressbar-value {
+    height: 100%;
+    width: 0%;
+    position: absolute;
+    display: none;
+    border: 0 none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.p-progressbar-determinate .p-progressbar-label {
+    display: inline-flex;
+}
+
+.p-progressbar-determinate .p-progressbar-value-animate {
+    transition: width 1s ease-in-out;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+    content: "";
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    content: "";
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation-delay: 1.15s;
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+@keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+@-webkit-keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+@keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}    
+`
+};

components/lib/theme/aura/progressbar/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}