Przeglądaj źródła

style: animacao no card 'solicitando sob medida'

Gustavo Zanatta 1 tydzień temu
rodzic
commit
cec075de8a

+ 59 - 1
src/pages/dashboard/components/DashboardPendingCustomSchedules.vue

@@ -92,9 +92,67 @@ const router = useRouter();
 }
 
 .progress-fill {
-  width: 35%;
+  position: relative;
+  width: 0;
   height: 100%;
+  border-radius: inherit;
+  overflow: hidden;
   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 {