67 lines
1.6 KiB
CSS
67 lines
1.6 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 left-0 bottom-0 will-change-[left,right];
|
|
}
|
|
|
|
.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 left-0 bottom-0 will-change-[left,right];
|
|
|
|
}
|
|
|
|
.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% {
|
|
left: -35%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
}
|
|
|
|
@keyframes p-progressbar-indeterminate-anim-short {
|
|
0% {
|
|
left: -200%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
100% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
} |