From bebf2eba999d8a3ff43b05d71cee7720561188a7 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Fri, 5 Jul 2024 01:18:27 +0100
Subject: [PATCH] Adjust near to me refresh animation

---
 src/lib/cards/Card.svelte | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/cards/Card.svelte b/src/lib/cards/Card.svelte
index 69f433d..352a904 100644
--- a/src/lib/cards/Card.svelte
+++ b/src/lib/cards/Card.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { fade } from "svelte/transition";
     import type { CardConfig } from "./Card.types";
-    import { IconHelpCircle, IconReload } from "@tabler/icons-svelte";
+    import { IconHelpCircle, IconRefresh } from "@tabler/icons-svelte";
     import Tooltip from "$lib/Tooltip.svelte";
 
     export let config: CardConfig;
@@ -20,7 +20,7 @@
             {/if}
             {#if config.showRefresh}
                 <button class:refreshing={config.refreshing} on:click={config.onRefresh} aria-label="Refresh">
-                    <IconReload />
+                    <IconRefresh />
                 </button>
             {/if}
         </div>
@@ -68,7 +68,8 @@
     }
 
     .refreshing {
-        animation: spin 1s linear infinite;
+        animation: spin 1.5s linear infinite;
+        transform-origin: 50% 45%;
     }
 
     .content {
@@ -90,9 +91,14 @@
     @keyframes spin {
         0% {
             transform: rotate(0deg);
+            color: white;
+        }
+        50% {
+            color: rgb(185, 185, 255);
         }
         100% {
-            transform: rotate(360deg);
+            transform: rotate(-360deg);
+            color: white;
         }
     }
 </style>