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

Refactor #6691 - For ProgressBar

pull/6697/head
tugcekucukoglu 2024-10-31 12:07:00 +03:00
parent 783b7f8495
commit 605aa167b1
1 changed files with 49 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
packages/primevue/src/progressbar/style/ProgressBarStyle.js
View File

@ -40,10 +40,10 @@ const theme = ({ dt }) => `
content: ""; content: "";
position: absolute; position: absolute;
background: inherit; background: inherit;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
bottom: 0; inset-block-end: 0;
will-change: left, right; will-change: inset-inline-start, inset-inline-end;
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
} }
@ -51,68 +51,69 @@ const theme = ({ dt }) => `
content: ""; content: "";
position: absolute; position: absolute;
background: inherit; background: inherit;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
bottom: 0; inset-block-end: 0;
will-change: left, right; will-change: inset-inline-start, inset-inline-end;
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation-delay: 1.15s; 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 { @keyframes p-progressbar-indeterminate-anim {
0% { 0% {
left: -35%; inset-inline-start: -35%;
right: 100%; inset-inline-end: 100%;
} }
60% { 60% {
left: 100%; inset-inline-start: 100%;
right: -90%; inset-inline-end: -90%;
} }
100% { 100% {
left: 100%; inset-inline-start: 100%;
right: -90%; inset-inline-end: -90%;
}
}
@-webkit-keyframes p-progressbar-indeterminate-anim {
0% {
inset-inline-start: -35%;
inset-inline-end: 100%;
}
60% {
inset-inline-start: 100%;
inset-inline-end: -90%;
}
100% {
inset-inline-start: 100%;
inset-inline-end: -90%;
}
}
@keyframes p-progressbar-indeterminate-anim-short {
0% {
inset-inline-start: -200%;
inset-inline-end: 100%;
}
60% {
inset-inline-start: 107%;
inset-inline-end: -8%;
}
100% {
inset-inline-start: 107%;
inset-inline-end: -8%;
} }
} }
@-webkit-keyframes p-progressbar-indeterminate-anim-short { @-webkit-keyframes p-progressbar-indeterminate-anim-short {
0% { 0% {
left: -200%; inset-inline-start: -200%;
right: 100%; inset-inline-end: 100%;
} }
60% { 60% {
left: 107%; inset-inline-start: 107%;
right: -8%; inset-inline-end: -8%;
} }
100% { 100% {
left: 107%; inset-inline-start: 107%;
right: -8%; inset-inline-end: -8%;
}
}
@keyframes p-progressbar-indeterminate-anim-short {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
100% {
left: 107%;
right: -8%;
} }
} }
`; `;