Migrated progressspinner

components/lib/theme/aura/index.js

@@ -11,6 +11,7 @@ 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 progressspinner from 'primevue/theme/aura/progressspinner';
 import scrollpanel from 'primevue/theme/aura/scrollpanel';
 import scrolltop from 'primevue/theme/aura/scrolltop';
 import skeleton from 'primevue/theme/aura/skeleton';
@@ -139,6 +140,7 @@ export default {
         inplace,
         panel,
         progressbar,
+        progressspinner,
         scrollpanel,
         scrolltop,
         skeleton,

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

@@ -0,0 +1,94 @@
+export default {
+    variables: {
+        colorScheme: {
+            light: {
+                root: {
+                    'color-1': '{red.500}',
+                    'color-2': '{blue.500}',
+                    'color-3': '{green.500}',
+                    'color-4': '{yellow.500}'
+                }
+            },
+            dark: {
+                root: {
+                    'color-1': '{red.400}',
+                    'color-2': '{blue.400}',
+                    'color-3': '{green.400}',
+                    'color-4': '{yellow.400}'
+                }
+            }
+        }
+    },
+    css: `
+.p-progress-spinner {
+    position: relative;
+    margin: 0 auto;
+    width: 100px;
+    height: 100px;
+    display: inline-block;
+}
+
+.p-progress-spinner::before {
+    content: "";
+    display: block;
+    padding-top: 100%;
+}
+
+.p-progress-spinner-svg {
+    height: 100%;
+    transform-origin: center center;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    animation: p-progress-spinner-rotate 2s linear infinite;
+}
+
+.p-progress-spinner-circle {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: 0;
+    stroke: var(--p-progressspinner-color-1);
+    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+    stroke-linecap: round;
+}
+
+@keyframes p-progress-spinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+@keyframes p-progress-spinner-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+@keyframes p-progress-spinner-color {
+    100%,
+    0% {
+        stroke: var(--p-progressspinner-color-1);
+    }
+    40% {
+        stroke: var(--p-progressspinner-color-2);
+    }
+    66% {
+        stroke: var(--p-progressspinner-color-3);
+    }
+    80%,
+    90% {
+        stroke: var(--p-progressspinner-color-4);
+    }
+}  
+`
+};

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

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