vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored progress spinner

pull/5677/head
Cagatay Civici 2024-04-08 14:31:27 +03:00
parent f7515c85db
commit 873aeb0322
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/lib/progressspinner/style/ProgressSpinnerStyle.js
View File

@ -1,9 +1,9 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: 'p-progress-spinner', root: 'p-progressspinner',
spinner: 'p-progress-spinner-svg', spinner: 'p-progressspinner-spin',
circle: 'p-progress-spinner-circle' circle: 'p-progressspinner-circle'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

18
components/lib/themes/primeone/base/progressspinner/index.js
View File

@ -1,6 +1,6 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-progress-spinner { .p-progressspinner {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 100px; width: 100px;
@ -8,13 +8,13 @@ export default {
display: inline-block; display: inline-block;
} }
.p-progress-spinner::before { .p-progressspinner::before {
content: ""; content: "";
display: block; display: block;
padding-top: 100%; padding-top: 100%;
} }
.p-progress-spinner-svg { .p-progressspinner-spin {
height: 100%; height: 100%;
transform-origin: center center; transform-origin: center center;
width: 100%; width: 100%;
@ -24,23 +24,23 @@ export default {
left: 0; left: 0;
right: 0; right: 0;
margin: auto; margin: auto;
animation: p-progress-spinner-rotate 2s linear infinite; animation: p-progressspinner-rotate 2s linear infinite;
} }
.p-progress-spinner-circle { .p-progressspinner-circle {
stroke-dasharray: 89, 200; stroke-dasharray: 89, 200;
stroke-dashoffset: 0; stroke-dashoffset: 0;
stroke: ${dt('progressspinner.color-1')}; stroke: ${dt('progressspinner.color-1')};
animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite; animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
stroke-linecap: round; stroke-linecap: round;
} }
@keyframes p-progress-spinner-rotate { @keyframes p-progressspinner-rotate {
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes p-progress-spinner-dash { @keyframes p-progressspinner-dash {
0% { 0% {
stroke-dasharray: 1, 200; stroke-dasharray: 1, 200;
stroke-dashoffset: 0; stroke-dashoffset: 0;
@ -54,7 +54,7 @@ export default {
stroke-dashoffset: -124px; stroke-dashoffset: -124px;
} }
} }
@keyframes p-progress-spinner-color { @keyframes p-progressspinner-color {
100%, 100%,
0% { 0% {
stroke: ${dt('progressspinner.color-1')}; stroke: ${dt('progressspinner.color-1')};