fix spinner css

Web-Multi-Media · Mar 21, 2024 · 499a6a5 · 499a6a5
1 parent 3f0a60a
commit 499a6a5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/frontend/src/components/Carousels/SampleNextArrow.css b/frontend/src/components/Carousels/SampleNextArrow.css
@@ -7,8 +7,22 @@
     opacity: 0.5;
 }
 .next { left: 25px; }
+.next-spinner-hidden {
+    display: none;
+}
 .back { right: 25px; }
 
+.next-spinner-wheel {
+    position: absolute;
+    line-height: 100%;
+    font-size: 123px;
+    top: 18%;
+    z-index: 2;
+    opacity: 1;
+    right: 25px;
+}
+
+
 .arrow:hover {
     opacity: 1;
     cursor: pointer;

diff --git a/frontend/src/components/Carousels/SampleNextArrow.js b/frontend/src/components/Carousels/SampleNextArrow.js
@@ -6,15 +6,15 @@ const SampleNextArrow = (props) => {
     const { className, style, onClick } = props;
     const isLoading = props.isloading;
 
-    if (isLoading) {
-        return (
-            <label >› <CircularProgress /></label>
-        )
-    } else {
+    return (
+        <label className="">
+            <div className={isLoading ? "next-spinner-wheel" : "next-spinner-hidden"}>
+                <CircularProgress/>
+            </div>
+            <div className="arrow back" onClick={onClick}>› </div>
+        </label>
+      );
 
-        return (
-            <label className="arrow back" onClick={onClick}>› </label>
-        );
-    }
+
 };
 export default SampleNextArrow;