From 45b8c58186592df75645548f8147c7ed13a7e8c5 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 13 Feb 2024 01:23:46 +0300 Subject: [PATCH] Migrated progressspinner --- components/lib/theme/aura/index.js | 2 + .../lib/theme/aura/progressspinner/index.js | 94 +++++++++++++++++++ .../theme/aura/progressspinner/package.json | 6 ++ 3 files changed, 102 insertions(+) create mode 100644 components/lib/theme/aura/progressspinner/index.js create mode 100644 components/lib/theme/aura/progressspinner/package.json diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index d6ee4d5a4..937ab2f88 100644 --- a/components/lib/theme/aura/index.js +++ b/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, diff --git a/components/lib/theme/aura/progressspinner/index.js b/components/lib/theme/aura/progressspinner/index.js new file mode 100644 index 000000000..5d500b091 --- /dev/null +++ b/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); + } +} +` +}; diff --git a/components/lib/theme/aura/progressspinner/package.json b/components/lib/theme/aura/progressspinner/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/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" +}