From 9b42429bb0cb006992d97f030a3a6b749354773c Mon Sep 17 00:00:00 2001
From: Andres Valencia <cryos74@gmail.com>
Date: Thu, 28 May 2020 10:48:48 -0500
Subject: [PATCH] Loading and character rollover animation

---
 src/App.svelte | 57 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 1040775..7a879ef 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -11,42 +11,57 @@
 </script>
 
 <style>
+  .header {
+    padding: 10px;
+    border-radius: 6px;
+    background-color: #e1f0fc;
+  }
+  .header img {
+    display: block;
+    width: 50%;
+    margin: 0 auto;
+  }
   .characters {
     width: 100%;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-gap: 8px;
   }
+  figure {
+    transition: transform .3s ease-in-out;
+  }
+  figure:hover {
+    transform: scale(1.2)
+  }
   figure img {
     width: 100%;
     margin: 0;
     filter: grayscale(100%);
+    transition: filter .6s ease-in;
   }
-  /* .Loading {
-    background-color: aqua;
-    width: 100px;
-    height: 100px;
-    animation-name: coloranimate;
-    animation-duration: 10s;
+  figure img:hover {
+    filter: grayscale(0);
+  }
+  figcaption {
+    padding: 3px;
+    text-align: center;
+    color: white;
+    background-color: lightblue;
   }
-
-  @keyframes coloranimate {
-    from {
-      background-color: aqua;
-    }
-    to {
-      background-color: tomato;
-    }
-  } */
 
   .Loading {
+    position: absolute;
+    left: calc((100vw - 300px) / 2);
+    top: calc((100vh - 300px) / 2);
+    z-index: 500;
     width: 300px;
     height: 300px;
-    background-color: #e1f0fc;
+    background-color: #FA8BFF;
+    background-image: linear-gradient(0deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 80%);
     border-radius: 50%;
-    border: 20px solid #9cadd7;
-    border-top: 20px solid #2c3687;
-    animation: loader 6s linear infinite;
+    border: 0px solid #9cadd7;
+    border-top: 40px solid #2BFF88;
+    animation: loader 5s linear infinite;
   }
 
   @keyframes loader {
@@ -59,7 +74,9 @@
   }
 </style>
 
-<div class="Loading" />
+<header class="header">
+  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Rick_and_Morty.svg" alt="Rick and Morty">
+</header>
 <div class="characters">
   {#each characters as character}
     <figure>