68 lines
1.8 KiB
CSS
68 lines
1.8 KiB
CSS
.p-progressbar {
|
|
@apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md
|
|
}
|
|
|
|
.p-progressbar-value {
|
|
@apply m-0 bg-primary
|
|
}
|
|
|
|
.p-progressbar-label {
|
|
@apply text-primary-contrast text-xs font-semibold
|
|
}
|
|
|
|
.p-progressbar-determinate .p-progressbar-value {
|
|
@apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out
|
|
}
|
|
|
|
.p-progressbar-determinate .p-progressbar-label {
|
|
@apply inline-flex
|
|
}
|
|
|
|
.p-progressbar-indeterminate .p-progressbar-value::before {
|
|
@apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
|
|
}
|
|
|
|
.p-progressbar-indeterminate .p-progressbar-value::before {
|
|
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 {
|
|
@apply content-[''] absolute bg-inherit top-0 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
|
|
|
|
}
|
|
|
|
.p-progressbar-indeterminate .p-progressbar-value::after {
|
|
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
|
animation-delay: 1.15s;
|
|
}
|
|
|
|
@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%;
|
|
}
|
|
}
|