|
@@ -92,9 +92,67 @@ const router = useRouter();
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.progress-fill {
|
|
.progress-fill {
|
|
|
- width: 35%;
|
|
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 0;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
|
+ border-radius: inherit;
|
|
|
|
|
+ overflow: hidden;
|
|
|
background: linear-gradient(90deg, #ff72df, #8f5cff);
|
|
background: linear-gradient(90deg, #ff72df, #8f5cff);
|
|
|
|
|
+ animation: progressLoopFill 3s ease-in-out infinite;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.progress-fill::after {
|
|
|
|
|
+ content: "";
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: -35%;
|
|
|
|
|
+ width: 35%;
|
|
|
|
|
+
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ 90deg,
|
|
|
|
|
+ transparent,
|
|
|
|
|
+ rgba(255, 255, 255, 0.45),
|
|
|
|
|
+ transparent
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ transform: skewX(-20deg);
|
|
|
|
|
+ animation: progressShine 2s linear infinite;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@keyframes progressLoopFill {
|
|
|
|
|
+ 0% {
|
|
|
|
|
+ width: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ 80% {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ 100% {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@keyframes progressShine {
|
|
|
|
|
+ from {
|
|
|
|
|
+ left: -35%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ to {
|
|
|
|
|
+ left: 135%;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@media (prefers-reduced-motion: reduce) {
|
|
|
|
|
+ .progress-fill,
|
|
|
|
|
+ .progress-fill::after {
|
|
|
|
|
+ animation: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .progress-fill {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.clock-badge {
|
|
.clock-badge {
|