Update templates/image_studio.html

templates/image_studio.html

@@ -1584,31 +1584,32 @@
             const pb = document.getElementById('tv-progress-bar');
             if (!pb) return;
             
-            // اضافه کردن استایل انیمیشن رفت و برگشتی به صورت خودکار به صفحه (فقط یک‌بار)
-            if (!document.getElementById('tv-indeterminate-style')) {
+            // اضافه کردن استایل انیمیشن بسیار نرم و حرفه‌ای (پر و خالی شدن از چپ به راست)
+            if (!document.getElementById('tv-fluid-style')) {
                 const style = document.createElement('style');
-                style.id = 'tv-indeterminate-style';
+                style.id = 'tv-fluid-style';
                 style.innerHTML = `
-                    @keyframes progress-sweep {
-                        0% { transform: translateX(-100%); width: 50%; }
-                        50% { transform: translateX(200%); width: 50%; }
-                        100% { transform: translateX(-100%); width: 50%; }
+                    @keyframes progress-fluid {
+                        0% { left: 0; width: 0%; }
+                        50% { left: 0; width: 100%; }
+                        100% { left: 100%; width: 0%; }
                     }
-                    .pb-indeterminate {
-                        animation: progress-sweep 1.8s infinite ease-in-out !important;
+                    .pb-fluid {
+                        animation: progress-fluid 2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
+                        transition: none !important;
                     }
                 `;
                 document.head.appendChild(style);
             }
 
             // ریست کردن حالت‌های قبلی
-            pb.classList.remove('pb-indeterminate');
-            pb.style.transform = 'none';
+            pb.classList.remove('pb-fluid');
+            pb.style.left = '0';
             pb.style.width = '0%';
 
             if (isIndeterminate) {
-                // فعال کردن حالت رفت و برگشتی ممتد (اسکنر) برای ایدئوگرام
-                pb.classList.add('pb-indeterminate');
+                // فعال کردن حالت پر و خالی شدن نرم و بی‌نهایت (برای ایدئوگرام)
+                pb.classList.add('pb-fluid');
             } else {
                 // حالت پر شدن عادی برای سایر مدل‌ها
                 let currentProg = 0;
@@ -1631,8 +1632,8 @@
             const pb = document.getElementById('tv-progress-bar');
             if(pb) {
                 // با اتمام کار، انیمیشن را حذف کرده و نوار را 100% پر میکنیم
-                pb.classList.remove('pb-indeterminate');
-                pb.style.transform = 'none';
+                pb.classList.remove('pb-fluid');
+                pb.style.left = '0';
                 pb.style.width = '100%';
             }
         }