From 0c8393637a20634be349ab7bbf1432147dc7c9ec Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 22 Jan 2021 12:44:30 -0800
Subject: [PATCH] fix(loading): adjust spinner styles

---
 src/Loading/Loading.svelte | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/Loading/Loading.svelte b/src/Loading/Loading.svelte
index d4f8efb9..f91b605f 100644
--- a/src/Loading/Loading.svelte
+++ b/src/Loading/Loading.svelte
@@ -14,7 +14,7 @@
   /** Set an id for the label element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  $: spinnerRadius = small ? "26.8125" : "37.5";
+  $: spinnerRadius = small ? "42" : "44";
 </script>
 
 {#if withOverlay}
@@ -33,20 +33,20 @@
     >
       <!-- svelte-ignore a11y-label-has-associated-control -->
       <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
-      <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
+      <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
         <title>{description}</title>
         {#if small}
           <circle
             class:bx--loading__background="{true}"
-            cx="0"
-            cy="0"
+            cx="50%"
+            cy="50%"
             r="{spinnerRadius}"
           ></circle>
         {/if}
         <circle
           class:bx--loading__stroke="{true}"
-          cx="0"
-          cy="0"
+          cx="50%"
+          cy="50%"
           r="{spinnerRadius}"
         ></circle>
       </svg>
@@ -64,20 +64,20 @@
   >
     <!-- svelte-ignore a11y-label-has-associated-control -->
     <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
-    <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
+    <svg class:bx--loading__svg="{true}" viewBox="0 0 100 100">
       <title>{description}</title>
       {#if small}
         <circle
           class:bx--loading__background="{true}"
-          cx="0"
-          cy="0"
+          cx="50%"
+          cy="50%"
           r="{spinnerRadius}"
         ></circle>
       {/if}
       <circle
         class:bx--loading__stroke="{true}"
-        cx="0"
-        cy="0"
+        cx="50%"
+        cy="50%"
         r="{spinnerRadius}"
       ></circle>
     </svg>