feat: rainbow bg on progress

map3xyz · Dec 22, 2022 · e0dbfa8 · e0dbfa8
1 parent 86864da
commit e0dbfa8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/src/components/ProgressBar/index.tsx b/src/components/ProgressBar/index.tsx
@@ -4,7 +4,7 @@ const ProgressBar: React.FC<Props> = ({ progress }) => {
   return (
     <div className="relative h-1 w-full rounded-lg bg-neutral-100 dark:bg-neutral-800">
       <div
-        className="absolute left-0 h-full rounded-lg bg-orange-600 transition-all duration-150"
+        className="rainbow-background absolute left-0 h-full rounded-lg bg-orange-600 transition-all duration-150"
         style={{ width: progress * 100 + '%' }}
       ></div>
     </div>

diff --git a/src/preview.tsx b/src/preview.tsx
@@ -24,6 +24,7 @@ root.render(
             }
             return { address: '0xd8da6bf26964af9d7eed9e03e53415d37aa96045' };
           },
+          rainbowRoad: true,
           // networkCode: 'goerli',
           theme: 'dark',
         });

diff --git a/src/styles/scrollbars.scss b/src/styles/scrollbars.scss
@@ -81,6 +81,22 @@
         rgba(251, 7, 217, 1) 90%,
         rgba(255, 0, 0, 1) 100%
     );
+    .rainbow-background {
+        background: linear-gradient(
+            90deg,
+            rgba(255, 0, 0, 1) 0%,
+            rgba(255, 154, 0, 1) 10%,
+            rgba(208, 222, 33, 1) 20%,
+            rgba(79, 220, 74, 1) 30%,
+            rgba(63, 218, 216, 1) 40%,
+            rgba(47, 201, 226, 1) 50%,
+            rgba(28, 127, 238, 1) 60%,
+            rgba(95, 21, 242, 1) 70%,
+            rgba(186, 12, 248, 1) 80%,
+            rgba(251, 7, 217, 1) 90%,
+            rgba(255, 0, 0, 1) 100%
+        );
+    }
     --scrollbar-color: transparent;
     .layout-scrollbar {
         overflow-y: overlay;