Ver código fonte

fix: :bug: fix(adicionar animações) Foi ajustado a animação da barra de carregamento na visão do cliente da diaria em anamento

Foi ajustado a animação da barra de carregamento na visão do cliente da diaria em andamento

origin: bug-interno
kayo henrique 6 dias atrás
pai
commit
f7a0bc83d9

+ 43 - 5
src/components/dashboard/DashboardPendingSchedules.vue

@@ -205,16 +205,54 @@ const seeDetails = (item) => {
 
 .progress-track {
   width: 100%;
-  height: 5px;
+  height: 6px;
   background: #e2e8f0;
-  border-radius: 3px;
+  border-radius: 999px;
   overflow: hidden;
 }
 
 .progress-fill {
+  position: relative;
   height: 100%;
-  border-radius: 3px;
-  background: linear-gradient(90deg, #8b5cf6, #ec4899);
-  transition: width 0.4s ease;
+  border-radius: inherit;
+
+  background: linear-gradient(
+    90deg,
+    #3b5cff,
+    #7a4dff,
+    #d94cff
+  );
+
+  transition: width .4s ease;
+  overflow: hidden;
+}
+
+.progress-fill::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -35%;
+  width: 35%;
+
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255,255,255,.45),
+    transparent
+  );
+
+  transform: skewX(-20deg);
+  animation: progressShine 2s linear infinite;
+}
+
+@keyframes progressShine {
+  from {
+    left: -35%;
+  }
+
+  to {
+    left: 135%;
+  }
 }
 </style>