add animation to step

components/panel/addDoctor/Step.js

@@ -4,7 +4,7 @@ import UserEdit from "@/components/icons/UserEdit";
 
 function Step({ value }) {
   const list = [
-    { icon: <UserEdit active={value > 0} />, name: "اطلاعات عمومی" },
+    { icon: <UserEdit active={value >= 0} />, name: "اطلاعات عمومی" },
     { icon: <LocationAdd active={value >= 1} />, name: "اطلاعات مطب" },
     { icon: <CalendarTick active={value >= 2} />, name: "روزهای کاری" },
   ];
@@ -15,15 +15,17 @@ function Step({ value }) {
         <li className="flex items-center justify-center" key={idx}>
           <div className="flex flex-col items-center justify-center gap-2">
             <div
-              className={`flex items-center justify-center p-[18px] w-[75px] h-[75px] rounded-full
-          ${value > idx ? "bg-[#5559CE]" : "bg-[#F6F6F6]"}`}
+              className={`flex items-center bg-[#F6F6F6] justify-center p-[18px] w-[75px] h-[75px] rounded-full
+                relative overflow-hidden before:delay-500 before:transition-all before:duration-500 
+                before:absolute before:w-full before:h-full before:bg-[#5559CE]
+          ${value >= idx ? "before:right-0" : "before:-right-full"}`}
             >
-              {item.icon}
+              <div className="z-10 delay-500">{item.icon}</div>
             </div>
             <p
               className={`text-[16px]
            ${
-             value > idx
+             value >= idx
                ? "font-bold text-[#5559CE]"
                : "font-normal text-[#616161]"
            }`}
@@ -33,9 +35,11 @@ function Step({ value }) {
           </div>
           {list.length > idx + 1 && (
             <span
-              className={`block rounded-[16px] h-[2px] w-[100px] ${
-                value > idx ? "bg-[#5559CE]" : "bg-[#EFEFEF]"
-              }`}
+              className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[100px]
+                relative overflow-hidden before:transition-all before:duration-500 
+                before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear
+
+                 ${value > idx ? "before:right-0" : "before:-right-full"}`}
             ></span>
           )}
         </li>