From 8dae52e5d7abb5654451fca1659e1767176a2d7b Mon Sep 17 00:00:00 2001
From: Khusham Bansal <kbkhushambansal@gmail.com>
Date: Tue, 31 Oct 2023 19:24:47 +0530
Subject: [PATCH] Added Loading Animation

---
 frontend-task/src/App.css | 53 ++++++++++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/frontend-task/src/App.css b/frontend-task/src/App.css
index 2e52b7e..262ca6c 100644
--- a/frontend-task/src/App.css
+++ b/frontend-task/src/App.css
@@ -303,6 +303,30 @@ body {
   }
 }
 
+
+.btn-search.loading {
+  background-color: #f9f2f2;
+  cursor: not-allowed;
+  color: #ebeaea;
+  font-weight: bold;
+  background-image: linear-gradient(90deg, #fbe0e0 25%, transparent 25%, transparent 50%, #d2adad 50%, #f8eeee 75%, transparent 75%, transparent);
+  background-size: 4px 4px;
+  animation: loading 1s infinite linear;
+}
+
+
+
+@keyframes loading {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 4px 0;
+  }
+}
+
+
 /* BALL ANIMATION OVER*/
 /* tablet */
 @media (max-width: 768px) and (min-width: 480px) {
@@ -334,7 +358,7 @@ body {
   }
 }
 
-/*Small Laptops*/
+/* /Small Laptops/ */
 @media (max-width: 1280px) and (min-width: 768px) {
 
   .container {
@@ -347,21 +371,20 @@ body {
     flex-direction: column;
     gap: 36px;
   }
+}
 
-  /*desktops*/
-  /* Solution to issue-16 */
-  @media (min-width: 1920px) {
-    .container {
-      width: 30vw;
-      position: absolute;
-      top: 20vh;
-      left: 50vw;
-      transform: translateX(-50%);
-      display: flex;
-      flex-direction: column;
-      gap: 36px;
-    }
-
+/* /desktops/ */
+/* Solution to issue-16 */
+@media (min-width: 1920px) {
+  .container {
+    width: 30vw;
+    position: absolute;
+    top: 20vh;
+    left: 50vw;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 36px;
   }
 
 }
\ No newline at end of file