Add new progress animation and batch mode info

renderer/components/upscayl-tab/view/ProgressBar.tsx

@@ -25,17 +25,29 @@ function ProgressBar({
   return (
     <div className="absolute flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
       <div className="flex flex-col items-center gap-2">
-        <Spinner />
+        <img
+          src="icon.png"
+          alt="Upscayl Icon"
+          className="w-12 h-12 mb-2 spinner"
+        />
         <p className="rounded-full bg-base-300 px-2 py-1 font-bold">
           {batchMode && "Batch Upscale In Progress: " + batchProgress}
+
           {!batchMode &&
             (doubleUpscaylCounter > 0
               ? `${progress}\nPass ${doubleUpscaylCounter}`
               : `${progress}`)}
         </p>
+
         <p className="rounded-full bg-base-300 px-2 py-1 text-sm font-medium">
           Doing the Upscayl magic...
         </p>
+        {batchMode && (
+          <p className="text-xs rounded-btn text-base-content/70 bg-base-300 max-w-xs text-center pb-1">
+            Info: The images will be converted and scaled after the upscaling
+            process.
+          </p>
+        )}
         <button onClick={stopHandler} className="btn-danger btn">
           STOP
         </button>

renderer/pages/index.tsx

@@ -604,7 +604,6 @@ const Home = () => {
         {window.electron.platform === "mac" && (
           <div className="absolute top-0 w-full h-8 mac-titlebar"></div>
         )}
-
         {progress.length > 0 &&
         upscaledImagePath.length === 0 &&
         upscaledBatchFolderPath.length === 0 ? (
@@ -656,7 +655,7 @@ const Home = () => {
         {batchMode &&
           upscaledBatchFolderPath.length === 0 &&
           batchFolderPath.length > 0 && (
-            <p className="select-none text-neutral-50">
+            <p className="select-none text-base-content">
               <span className="font-bold">Selected folder:</span>{" "}
               {batchFolderPath}
             </p>
@@ -665,7 +664,7 @@ const Home = () => {
         {/* BATCH UPSCALE DONE INFO */}
         {batchMode && upscaledBatchFolderPath.length > 0 && (
           <>
-            <p className="select-none py-4 font-bold text-neutral-50">
+            <p className="select-none py-4 font-bold text-base-content">
               All done!
             </p>
             <button

renderer/styles/globals.css

@@ -202,6 +202,11 @@
   background-repeat: repeat;
 }
 
+.spinner {
+  -webkit-animation: sk-rotateplane 2.2s infinite ease-in-out;
+  animation: sk-rotateplane 2.2s infinite ease-in-out;
+}
+
 @keyframes animate-step-in {
   0% {
     opacity: 0;
@@ -215,3 +220,30 @@
     transform: translateY(0px);
   }
 }
+
+@-webkit-keyframes sk-rotateplane {
+  0% {
+    -webkit-transform: perspective(120px);
+  }
+  50% {
+    -webkit-transform: perspective(120px) rotateY(360deg);
+  }
+  100% {
+    -webkit-transform: perspective(120px) rotateY(360deg) rotateX(360deg);
+  }
+}
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  }
+  50% {
+    transform: perspective(120px) rotateX(-360.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-360.1deg) rotateY(0deg);
+  }
+  100% {
+    transform: perspective(120px) rotateX(-360deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-360deg) rotateY(-359.9deg);
+  }
+}