|
|
@@ -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>
|